Tabler v1.7.1

A patch release for Tabler 1.7. It fixes the issues that surfaced right after the 1.7 release: the flag size classes inside flex containers, the small and large select arrow, .modal-lg and .modal-xl below their breakpoints, a checkbox label that stretched across the whole row and a round of Tom Select focus ring and dark theme glitches. Modals and offcanvases return focus to the element that opened them, .text-muted has better contrast in dark mode, and the demo pages got a pass on accessible names, heading order and reduced motion.

Core changes

• 50c15e7: Fixed .breadcrumb link styles applying to the items of a dropdown placed inside it.
• 2bdbab3: Fixed dark mode contrast of .text-muted and other muted theme color utilities with a lighter --tblr-muted value.
• 1745d1f: Fixed the .flag size classes, which were stretched to one height inside flex containers because the height came from aspect-ratio.
• db649f4: Fixed .form-check-label stretching the clickable area of a checkbox or radio across the whole row.
• f076113: Fixed the arrow position and the room kept for it in .form-select-sm and .form-select-lg.
• 0d2e253: Fixed .modal-lg and .modal-xl falling back to the default width in viewports below the lg and xl breakpoints.
• 5d5186e: Fixed Modal and Offcanvas not returning focus to the element that opened them when closed.
• e069052: Fixed .page-text in pagination using the body font size instead of --tblr-pagination-font-size, including pagination-sm and pagination-lg.
• ac8eb82: Fixed ApexCharts demos and Dropzone previews to respect prefers-reduced-motion, with a shared prefersReducedMotion() helper.
• 8336b33: Added a focus ring to .card-body-scrollable and .table-responsive so a scrollable region that is focused with the keyboard is visible.
• cf3ceaa: Fixed the native clear button missing from .form-control search inputs in Chrome and Safari.
• 73392da: Fixed .sortable-drag tilting the dragged element itself in native drag mode, which broke the drag.
• c9e9b9b: Fixed the uneven .table-bordered grid in the dark theme by using the opaque border color.
• f1a49aa: Fixed .text-bg-* and .progress-bar hard-coding white text instead of reading the --tblr-*-fg tokens.
• 3eaeb74: Fixed the Tom Select focus ring leaving the wrapper border visible at the corners.
• 0df5946: Fixed the Tom Select focus ring flashing black before it fades in.
• 7ee278f: Fixed the square start corners of a Tom Select that opens an .input-group.
• 01f6a6c: Fixed the Tom Select dropdown text growing to the mobile font size on phones.
• fa4c175: Fixed the bright dividers before the remove button of Tom Select chips in the dark theme.

Demo changes

• 76b309f: Fixed the unnamed search input in the AdvancedTable demo by adding an aria-label.
• 74f6193: Fixed the heading order on the dashboard and other preview pages so no heading level is skipped.
• 041d4e9: Added an accessible name to the split dropdown toggle and the icon-only button demos.
• 1dfe93d: Fixed the missing accessible name on the invalid state input in the form elements demo by adding aria-label.
• 2225064: Fixed the select all checkbox in the Invoices table on the tables preview page.
• ae7cd30: Added aria-label to the row checkboxes in the invoices, tasks and advanced table demos and the input group checkbox and radio.
• ac6615c: Fixed the page header in DefaultLayout so it sits inside the <main> landmark.
• fcf5276: Added an ariaLabel prop to Pagination and gave each pagination on a page its own name.
• 276c904: Added an ariaLabel prop to Range and named the noUiSlider handles on the form elements pages.
• 6acc5c5: Fixed unlabeled <select> elements on the form demo pages and added an ariaLabel prop to the Select component.
• c15dac2: Added hidden text to empty <th> cells in the Table, AdvancedTable, TopDeals and Invoices demos and the tour page.
• 9beef3a: Updated the demo Toast to use role="status" and aria-live="polite" by default, with an urgent prop for alert.
• c3ae0ed: Fixed the height of the Traffic summary chart on the dashboard page.

Get Started with Tabler

Ready to explore the latest features? Download Tabler today and start building with the most advanced version of Tabler yet! 🚀

• View Documentation
• View Preview
• Download Tabler v1.7.1

We’d love to hear your thoughts and see what you build with this release. Share your feedback and creations with us!