TWE package went through a serious refactoring and unification process. We have changed a lot of things to make TWE more consistent and easier to use. Our team has also addressed lots of issues and improved the overall customization options for our components.

Breaking changes:

• Changed name te to twe in data attributes, events, methods etc.
• Unified event and method names, added new events, removed some methods
• Changed package file structure
• Charts became a separate file - removed dynamic import and built as a different module
• Deleted most arbitrary classes across all components and replaced them with Tailwind CSS or custom TWE classes - extended plugin
• Improved RTL support in our package
• Added unit tests for all components in the package

To make the transition to TWE v2 easier we prepared a list of changes needed in existing projects, which you can find in the Migration guide.

Design updates:

Implemented a comprehensive theming system that extends across all components, allowing for greater customization and visual coherence throughout the package.

New features:

• Updated paths in tailiwnd.config.js snippets - changes connected with package file structure
• Added Icons Integration tutorial
• Updated Django Integration tutorial - added initializing via JS section
• Added Qwik Integration tutorial
• Added ASP.NET Integration tutorial
• Added Class customization tutorial
• Extended shadows
• Updated icons across all components
• Alert and Toast - added new functionalities and new examples:
• position, container and offset options
• Stepper - added new functionalities and new examples:
• Validation functionalities in Linear Stepper - default HTML validation and with Validation component
• Mobile Stepper - stepperMobileBackBtn, stepperMobileBackBtnIcon, stepperMobileBarBreakpoint, stepperMobileNextBtn, stepperMobileNextBtnIcon, stepperMobileOfTxt and stepperMobileStepTxt options
• Possibility to toggle to Vertical or Mobile Stepper on smaller screens - stepperMobileBreakpoint, stepperVerticalBreakpoint
• data-twe-stepper-optional attribute which marks a step as optional
• stepperHeadClick options which block the possibility of changing a step by clicking on another step
• Scrollspy - added new functionalities and new examples:
• collapsible and smooth scroll options
• Search - added new examples
• Spinner / Loader - added new examples

Fixed & improved:

Content & Styles:

• Animations - removed init and autoInit methods

Navigation:

• Sidenav:
• Fixed an issue with Ripple in the update method
• Fixed wrong data attribute name for active sidenav state
• Added a data-twe-sidenav-slim-active attribute that changes upon switching from full to slim sidenav

Components:

• Carousel:
• Fixed jQueryInterface and dispose methods
• Fixed an issue with not triggering interval when the ride option is true and slides are manually changed (e.g. via the next method)
• Fixed an issue with initialization via JS without data-twe-carousel-init which made the component not animate when changing slides
• Chips - Fixed dispose method and add.twe.chips event
• Popconfirm
• Added FocusTrap
• Fixed an issue with scrolling in Popconfirm modal - disabled scrolling when the modal is opened and restored it when the modal is closed
• Fixed the way of adding event listeners, the cancel event and dispose method
• Rating - Fixed dispose method
• Tooltip and Popover - updated default component template

Forms:

• Autocomplete:
• Fixed an issue with clicking on No results found field
• Added offset option which allows to customize the popper offset
• Fixed issues with input focus after closing the dropdown on the ESC key
• Fixed toggling aria-expanded value
• Select:
• Fixed toggling aria-expanded value
• Fixed an issue with Multiselect with labels - after opening the dropdown the middle notch had a border top
• Fixed an issue where after filtering options and closing the dropdown, the setValue method was not functioning and caused the select to malfunction upon reopening

Data:

• Charts - made the config parameter optional within the update method
• Datatables - fixed wrong element and method in PerfectScrollbar usage

Utils:

• Backdrop - fix an issue with undefined class

In this release, we are introducing new Autocomplete and Multi Range Slider components. We also updated integration tutorials and added new guides for SvelteKit and Bun. Our team has also addressed lots of issues and improved the overall customization options for our components.

New features

• #1932: Added new shadow classes to the TW Elements plugin and updated the Shadows page - by @juujisai
• #2040: Prepared environment for unit testing - by @Trochonovitz
• #2064: Added Bun integration guide - by @juujisai
• #2108: Added SvelteKit integration tutorial - by @iprzybysz

New components

• #2008: Added Autocomplete component - by @juujisai
• #2152: Added Multi Range Slider component - by @iprzybysz

Docs

• #1641: Fixed issue where links from API tabs section won't change the tab to API - by @juujisai
• #1937: Fixed Charts examples where options were not provided correctly - by @iprzybysz
• #1948: Updated integration tutorials and added section with troubleshooting - by @iprzybysz
• #1953: Fixed issue with search results from external domains not opening in a new tab - by @juujisai
• #1960: Updated the optimization page information about the initTE method - by @letzfets
• #1982: Updated Charts examples size on mobiles - by @njolipatrick, @juujisai
• #2010: Added Roboto import to tutorials - by @juujisai
• #2027: Renamed zip package to twe-starter - by @juujisai
• #2039: Updated toasts icons - by @Trochonovitz
• #2045: Fixed Modal examples visibility on smaller screens - by @Trochonovitz
• #2047: Removed outdated Tab color example - by @Trochonovitz
• #2074: Fixed event name in Datetimepicker documentation - by @juujisai
• #2083: Fixed mobile styling on the main page and Search page - by @juujisai
• #2094: Updated search.json file - by @juujisai
• #2105: Updated snippets on Getting Started page - by @iprzybysz
• #2117: Fixed a typo inside flexbox tutorial - by @Mike2020x
• #2138: Removed double inits from components snippets - by @iprzybysz
• #2148: Fixed typo in Vertically Centered Modal snippet - by @liamka

Fixed & improved

• #1929: Updated dropdown animation for the Select component - by @iprzybysz
• #1938: Fixed issue with setValue method not triggering events in Multiple Select - by @Trochonovitz
• #1947: Fixed issues with datepicker and timepicker options in Datetimepicker - by @juujisai
• #1986: Removed inheriting name attribute by Select input element - by @Trochonovitz
• #1997: Added arrow customization to Select component - by @Trochonovitz
• #2005: Added autoclose option to remove Alert from DOM after closing - by @Trochonovitz
• #2006: Fixed errors that occured when disposing the Rating component - by @Trochonovitz
• #2106: Fixed issue with Modals dispose method not removing event listeners - by @Trochonovitz
• #2012: Improved reading of the main colors for the Ripple component - by @juujisai
• #2036: Datatables - Fixed issue with not beeing able to scroll on the table on smaller screens - by @Trochonovitz
• #2043: Fixed the interval option for Animations - by @iprzybysz
• #2046: Fixed flashing outline border inside Chips - by @Trochonovitz
• #2050: Fixed Input issues with label width when initialized via JS - by @Trochonovitz
• #2051: Updated component intros - by @juujisai
• #2055: Added option to customize animation duration inside Dropdowns - by @juujisai
• #2062: Added listeners for Select value changes inside the Validation component - by @juujisai
• #2075: Added current Datetimepicker value to the datetimeChange.te.datetimepicker event - by @Trochonovitz
• #2080: Added possibility for backdrop customization in Modals - by @juujisai
• #2098: Added possiblity to customize classes of the select all option inside the Select Multiple component - by @juujisai
• #2112: Improved reading of delay time after which the Modals display change - by @iprzybysz
• #2116: Improved reading of transition duration for the Select component - by @iprzybysz
• #2119: Improved step change animation for the Stepper component - by @juujisai
• #2121: Select - fixed cross-site scripting issue - by @iprzybysz
• #2122: Fixed issues with Sidenav right not showing when horizontal scrollbar is visible - by @iprzybysz
• #2127: Fixed issues with Timepicker not updating the modal after time was set by hand inside the input - by @iprzybysz
• #2132: Fixed issues with Stepper events - added onChangeStep and onChangedStep events - by @juujisai
• #2135: Fixed issues with doubleclicking the inline datepicker inside Datetimepicker component - by @juujisai
• #2174: Fixed disabling completed steps in no-editable Stepper - by @mako3577
• #2189: Fixed issues with timepicker dispose method causing dropdowns to stop working - by @iprzybysz

We are thrilled to announce the stable release of TW elements v1.0.0! In this release we fixed few issues and made sure that the components are working as expected. We hope you will enjoy the TW elements!

Docs

• #1906: Fixed modal examples that had input in them - by @juujisai

Fixed & improved

• #1913: Fixed issues with dismissing components - by @juujisai
• #1902: Updated TW elements starter content - by @juujisai
• #1893: The initTE method now allows users to specify additional options - by @juujisai

We're excited to introduce the Release Candidate version of Tailwind Elements, bringing us just a step away from the v1.0.0 release.

In this release, we were working on few new components and fixing some minor bugs. Let us know what you think about the new validation component and what we can further improve!

New features

• #1569: Added Extended animations - by @iprzybysz
• #1599: Added non-invasive modal and new modal examples - by @juujisai

New components

• #1561: Clipboard - by @iprzybysz
• #1562: Infinite scroll - by @iprzybysz
• #1563: Lazy loading - by @iprzybysz
• #1564: Loading management - by @iprzybysz
• #1566: Smooth scroll - by @iprzybysz
• #1567: Sticky - by @iprzybysz
• #1568: Touch - by @iprzybysz
• #1132: Validation - by @juujisai
• #1558: Datetimepicker - by @juujisai

Docs

• #1840: Added technology switcher to the main navbar - by @juujisai
• #1867: Added border and border radius to videos on Quick Start page - by @juujisai
• #1570: Added Privacy and GDPR Policy page - by @juujisai
• #1852: Fixed init via JS snippet for Animations - by @iprzybysz
• #1870: Fixed Select with CSS classes snippet - by @iprzybysz

Fixed & improved

• #1573: Fixed Animations issues on smaller screens - by @iprzybysz
• #1571: Improved styling for footer elements - by @iprzybysz
• #1572: Fixed Placeholders issues on smaller screens - by @iprzybysz
• #1844: Fixed colors of change time buttons in inline timepicker - by @iprzybysz
• #1845: Fixed issues with changing time by arrows in inline timepicker - by @iprzybysz
• #1877: Fixed issues with dropdowns inside navbar examples going off-viewport - by @iprzybysz
• #1869: Fixed issues with css sourcemaps - by @juujisai

In this release, we're introducing several new components and implementing numerous improvements and bug fixes. Notably, we've included a detailed guide on working with Legacy documentation and informative tutorials on effectively utilizing Internationalization (i18n) with TW elements. Additionally, we've also updated the look of some of our components and the layout of our documentation.

New features

• #1341: CLA signing bot - by @smolenski-mikolaj, @juujisai
• #1372: Added local installation guide for Legacy docs - by @iprzybysz
• #1555: Added Charts advanced page - by @juujisai
• #1635: Added new examples of navbars in documentation - by @iprzybysz
• #1664: Added new design blocks landing pages - by @martussky
• #1665: Added new design blocks demo landing pages - by @martussky
• #1700: Added autoinits for Tooltips and Popover - by @iprzybysz
• #1554: Created a new Internationalization guide - by @iprzybysz
• #1610: Added new Card examples - by @iprzybysz

New components

• #1556: Datatables - by @iprzybysz
• #1557: Lightbox - by @iprzybysz
• #1560: Rating - by @juujisai
• #1565: Scrollbar - by @juujisai
• #1559: Popconfirm - by @iprzybysz

Docs

• #1519: Update next integration tutorials to fix issues with incompatibility - by @juujisai
• #1550: Update the integration tutorials for the latest TE version - by @Trochonovitz
• #1629: Update the look of the main sidenav - by @juujisai
• #1626: Added Note About Using Hover With Animation - by @Yarob50
• #1633: Added offset to scrollspy in documentation - by @iprzybysz
• #1632: Updated footer - by @marveluck
• #1645: Updated the dark mode design in Prism - by @juujisai
• #1692: Added necessary module types to script tags - by @juujisai
• #1735: Updated info about React TW elements in React integration tutorial - by @filipkappa
• #1770: Updated notes about required node version after latest vite release - by @juujisai
• #1766: Fixed code indentation in integration tutorial snippets - by @iprzybysz
• #1805: Fixed typo in breadcrumbs file structure - by @juujisai

Optimization & refactor

• #1345: Scroll to top button - code update, new preview - by @juujisai
• #1506: Update the initialization of Carousel component and fix the autoplay issues - by @iprzybysz
• #1538: Unify and change the Chips init - by @juujisai
• #1543: Added possibility to change the input options and classes of the select component - by @iprzybysz
• #1565: Added Scrollbar component to Sidenav - by @juujisai
• #1623: Changed default line-height for paragraphs - by @iprzybysz
• #1686: Removed h1 & code hardcoded styles from TE - by @juujisai

Fixed & improved

• #1380: Fixed typos in Colors - by @martussky
• #1440: Fixed placeholder showing only for multiselect - by @juujisai
• #1536: Fixed issues with Scrollspy misalignment when loading page with anchor - by @juujisai
• #1578: Removed fixed width classes from code snippets - by @Trochonovitz
• #1594: Fixed mask color on hover for a card - by @martussky
• #1595: Fixed color class in the color docs - by @martussky
• #1596: Fixed hover effects color in the docs - by @martussky
• #1628: Charts - fixed issue with formatter when darkmode is on - by @juujisai
• #1630: Added darker background for examples in Cards and Navbars - by @iprzybysz
• #1643: Updated error message design in Timepicker - by @iprzybysz
• #1644: Form templates - update code in snippets - by @iprzybysz
• #1659: Fixed issues with clicking on Sidenav on iPhones - by @juujisai
• #1687: Fixed description in Paragraph documentation - by @iprzybysz
• #1667: Fixed issues with custom containers in inline Datepicker - by @iprzybysz
• #1689: Fixed "xs" breakpoint in plugin.cjs - by @juujisai
• #1701: Fixed issues with multiple initializations via initTE method - by @juujisai
• #1729: Fixed typos in scrollspy documentation - by @juujisai
• #1731: Fixed snippet for datepicker with translations - by @juujisai
• #1779: Update the dark mode background for Select inside the input group page - by @iprzybysz
• #1777: Fixed issues with clearing the select when default selected value was set - by @iprzybysz
• #1793: Fixed the position in vertical steppers - by @juujisai
• #1798: Ripple - fixed class customization - by @juujisai
• #1619: Fixed dispose method for Select component - by @vadim-pavlov
• #1680: Fixed typos in colors and tabs pages - by @whamtet
• #1807: Fixed issues with autoinits added to body element - by @juujisai
• #1815: Fixed issues with dismissing Alert component - by @juujisai
• #1738: Update scrollspy position calculation - by @AngeloKarugo

Dark mode integration

• #1179: Range - by @martussky
• #1582: Improved dark mode integration for charts - by @juujisai, @iprzybysz

This release brings huge improvements to the optimization of JS files. We decided to migrate from Webpack to Vite and add support for ES modules. This gives a significant weight reduction of the files built with our components, but requires their individual import and initialization. In addition, we implemented a system option for the dark theme in docs, checked many reports regarding integration with external tools and prepared dedicated guides.

New features

• #1279: ES modules support - by @juujisai
• #1461: External tools and frameworks integrations - by @trochonovitz

New components

• #1457: Chart - by @juujisai

Docs

• #1548: Dark mode - system option support - by @smolenski-mikolaj
• #1470: Add comments for nested elements in HTML code - by @trochonovitz
• #1484: Remove wrapper elements from all code snippets - by @trochonovitz
• #1412: Contribution guide updates - by @trochonovitz
• #1397: Add fixed buttons example - by @trochonovitz
• #1393: Getting started step by step tutorial for Vite - by @juujisai
• #1371: Scrollspy - add smooth scroll - by @trochonovitz
• #1370: Prism design update - by @iprzybysz
• #1459: Tutorials refactor - by @juujisai
• #1369: Search - first item should be active after typing anything - by @juujisai
• #1356: New newsletter page - by @trochonovitz
• #1361: Scrollspy - fix active item highlight on large screens - by @trochonovitz
• #1362: Prism - add terminal integration with $ sign - by @juujisai

Optimization & refactor

• #1549: Datepicker, Timepicker, Select - inputs unification and icons updates - by @juujisai
• #1549: Datepicker new features - by @juujisai

Fixed & improved

• #1384: Design system updates - by @martussky
• #1363: Dark mode integration and fix button issue in TE-STARTER (ZIP), CDN and MDB GO Starter - by @smolenski-mikolaj
• #1376: Modal - delayed dialog animation fix - by @trochonovitz
• #1373: Multiselect - double clicking on input crashes border - by @juujisai
• #1372: Animations - update init animations to run smooth - by @trochonovitz
• #1469: Timepicker fix for working with frameworks - by @trochonovitz
• #1381: Timepicker - custom icons without focus & disabled past issue - by @juujisai
• #1455: Add TW Elements version to disclaimer - by @juujisai

Dependencies

• #1532: Tailwind update from v3.2.4 to v3.3.0 - by @trochonovitz
• #1279: Migration from Webpack to Vite - by @juujisai

Dark mode integration

• #1404: Forms - by @martussky
• #1450: Charts - by @juujisai

In this breakthrough version we focused our attention on removing all custom classes from the UI KIT in favor of a Tailwind CSS system. Each component has been integrated with the dark theme. We added the option to customize classes in all components, even those with a complex structure. We migrated icons to SVG format, also giving full freedom to personalize them.

Our set has been extended with new complex Sidenav and Select components. Design system was improved to match the Material Minimal guidelines. The website got a new layout, as well as new functionalities such as API tab or modes switcher.

New features

• #1090, #1129: Migrate UI KIT class system to Tailwind and refactor Datepicker, Timepicker, Stepper, Ripple, Collapse, Accordion, Buttons, Carousel, Close, Dropdown, Modal, Navbar, Offcanvas, Popover, Spinners, Tooltip, Transitions, Animations, Alert, Toast, Tabs, Pills, Chips, MegaMenu, Pagination, Scrollspy, Forms - by @juujisai, @trochonovitz, @r-jacko, @martussky
• #1116: Dark mode switcher - by @smolenski-mikolaj
• #1228: Class attributes customization - by @smolenski-mikolaj
• #1127: Ripple effect by default - by @iprzybysz
• #1126: New modal positions - by @trochonovitz
• #1119: Extend color palette with custom theme colors - by @martussky

New components

• #1173: Select & Multiselect - by @juujisai
• #1172: Sidenav - by @juujisai
• #1130: Outline input - by @juujisai
• #1108: Placeholders - by @martussky
• #1109: Dividers - by @martussky
• #1110: Figures - by @martussky
• #1111: Images - by @martussky
• #1112: Masks - by @martussky
• #1113: Shadows - by @martussky

Docs

• #1170: Dark mode integration - by @smolenski-mikolaj
• #1105: API tab - by @trochonovitz
• #1274: Theming tutorial - by @trochonovitz
• #1275: Dark mode tutorial - by @trochonovitz
• #1262: Code snippets - dark mode & design update - by @r-jacko
• #1306: Scrollspy and Javascript file names unification - by @juujisai
• #1314: Shortcut shift + D for switching between modes - by @juujisai

Optimization & refactor

• #1125: Update compile config to deploy js components as te library - by @smolenski-mikolaj
• #1294: Manipulator utility update - by @juujisai
• #1285: Tidy up files structure - by @juujisai
• #1287: Focus trap utility fix - by @juujisai
• #1145: Add class ordering plugin - by @smolenski-mikolaj

Fixed & improved

• #1122: Video docs page layout fix - by @martussky
• #1060: Toast dismissing - by @juujisai
• #1223: Modals - fix positions offsets, backdrop outside click and fullscreen example - by @trochonovitz
• #1264: Tabs & Pills - prevent animating while clicking on active item - by @trochonovitz
• #1259: Timepicker - fix focus after closing via keyboard - by @trochonovitz
• #1064: Modal hidden class remaining active - by @trochonovitz

Dependencies

• #1096: Tailwind update from v3.0.7 to v3.2.4 - by @juujisai
• #1298: Icons - enable customization & migrate to Heroicons from Font Awesome - by @trochonovitz
• #1094: Migrate from Inter to Roboto font - by @juujisai
• #1059: Popper.js migrate to v2.x.x - by @trochonovitz

Dark mode integration

• #1175: Timepicker - by @r-jacko
• #1176: Textarea - by @juujisai
• #1177: Switch - by @martussky
• #1178: Search - by @martussky
• #1179: Range - by @martussky
• #1180: Radio - by @martussky
• #1183: File input - by @martussky
• #1185: Checkbox - by @martussky
• #1181: Inputs - by @juujisai
• #1184: Datepicker - by @juujisai
• #1186: Scrollspy - by @trochonovitz
• #1187: Navbar - by @trochonovitz
• #1189: Cards - by @iprzybysz
• #1190: Mega menu - by @shigure92
• #1191: Footer - by @trochonovitz
• #1192: Breadcrumb - by @trochonovitz
• #1193: Animations - by @trochonovitz
• #1194: Toasts - by @trochonovitz
• #1195: Timeline - by @shigure92
• #1196: Testimonials - by @shigure92
• #1197: Tables - by @shigure92
• #1198: Stepper - by @trochonovitz
• #1199: Social buttons - by @shigure92
• #1200: Shadows - by @shigure92
• #1201: Progress - by @shigure92
• #1202: Popover - by @shigure92
• #1203: Offcanvas - by @shigure92
• #1205: Modal - by @trochonovitz
• #1206: Login form - by @shigure92
• #1207: List group - by @shigure92
• #1208: Jumbotron - by @shigure92
• #1209: Hover effects - by @shigure92
• #1210: Headers - by @shigure92
• #1211: Dropdown - by @juujisai
• #1212: Collapse - by @iprzybysz
• #1213: Chips - by @iprzybysz
• #1214: Charts - by @iprzybysz
• #1241: Accordion - by @iprzybysz

Class customization

• #1229: Alert, Toast, Collapse, Accordion, Dropdown, Offcanvas, Ripple - by @juujisai
• #1230: Carousel - by @iprzybysz
• #1231: Datepicker - by @juujisai
• #1232, #1302: Timepicker - by @iprzybysz, @juujisai
• #1233: Modal, Scrollspy - by @trochonovitz
• #1234: Popover, Tooltip, Tabs, Pills - by @juujisai
• #1303: Chips - by @juujisai

API tab integration

• #1249: Popover, Tooltip, Tabs, Pills - by @trochonovitz
• #1250: Modal, Scrollspy - by @trochonovitz
• #1252: Button, Animate, Stepper - by @trochonovitz
• #1253: Datepicker - by @juujisai
• #1254: Carousel - by @iprzybysz
• #1251: Timepicker - by @iprzybysz
• #1255: Alert, Toast, Collapse, Accordion, Dropdown, Offcanvas, Ripple - by @iprzybysz