tabler/.github/release-notes/1.6.0.md

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-cover-dark.png">
  <img alt="Tabler 1.6" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-cover.png">
</picture>

Tabler 1.6 is out. It brings eight new components, a datepicker that doesn't depend on Litepicker any more, a neutral gray scale, colors defined in `oklch()` and a focus ring that's finally an outline. The CSS also got smaller: about 110 kB came off `tabler.min.css`. On top of that there are more than a hundred smaller changes across the framework, the demo pages and the docs.

## Datepicker

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-datepicker-dark.png">
  <img alt="Datepicker" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-datepicker.png">
</picture>

A calendar popup for a text input or a button, or an inline calendar on the page. It handles a single date, several dates and a range. It's built on Vanilla Calendar Pro, so Litepicker is deprecated, and the docs have a section on moving over from it.

## Sparkline

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-sparkline-dark.png">
  <img alt="Sparkline" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-sparkline.png">
</picture>

Tiny line, bar and circle charts drawn inline with text, for a trend in a table cell or next to a number. The chart is an SVG rendered from `data-bs-values`, so no chart library is needed. It takes its color from text utilities and its size from classes.

## Legend

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-legend-dark.png">
  <img alt="Legend" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-legend.png">
</picture>

A colored marker, a label and an optional value for the series of a chart or a progress bar. Group items with `.legend-list`, and turn on the interactive mode to toggle a series on click. The large variant `.legend-lg` shows a big value with a unit.

## Signal

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-signal-dark.png">
  <img alt="Signal" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-signal.png">
</picture>

A small row of stepped bars that shows a level, such as priority, strength or coverage. It sits next to a label, and the number of bars, the color and the size are all adjustable.

## Password strength

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-password-strength-dark.png">
  <img alt="Password strength" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-password-strength.png">
</picture>

A segmented meter that rates the password as the user types, so a weak password is visible before the form is sent. The scoring and the labels are configurable, and every change fires `change.bs.strength`.

## OTP input

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-otp-input-dark.png">
  <img alt="OTP input" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-otp-input.png">
</picture>

A one-time code field shown as separate character slots. It's still one real input underneath, so autofill, password managers, SMS codes and screen readers work. Slots can be grouped and masked, and there are validation states.

## Clipboard

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-clipboard-dark.png">
  <img alt="Clipboard" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-clipboard.png">
</picture>

A copy button for the text of a field, an element or a literal string, with a short copied state. It's built on the browser clipboard API and fires events, so `dist/libs/clipboard` is deprecated.

## Confetti

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-confetti-dark.png">
  <img alt="Confetti" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.6.0-confetti.png">
</picture>

A short shower of colored pieces over the page, for a finished setup, a first order or a signup. Put `data-bs-toggle="confetti"` on a button or call it from JavaScript, and set the amount, length, speed and colors with data attributes.

---

## Plugins are components now

`Autosize`, `CountUp`, `InputMask`, `Sortable` and `SwitchIcon` are real components with instances, methods and events. Autosize and CountUp are written from scratch and don't need the `dist/libs` scripts any more, so those are deprecated. CountUp respects `prefers-reduced-motion`.

Switch icon got a `switch-icon-loading` state. Pass a promise to `event.wait()` in the `toggle.bs.switch-icon` event and the button shows a spinner until it settles.

Sortable got drag styles for the ghost, the chosen and the dragged item, and the demo shows a drag handle, table rows, a kanban board, clone, multi-drag and swap.

`tabler.js` also no longer stops on page load when one element has an invalid `data-*` config. The error is logged and every other component is still created.

## Neutral gray and oklch colors

The default gray scale is `neutral` now. In 1.5 it had a slight blue tint, so backgrounds, borders and muted text look a little different. To keep the 1.5 look, load `tabler-themes.css` and set `data-bs-theme-base="gray"` on `<html>`.

The palette is defined in `oklch()`, and tints, shades and hover states are mixed with `color-mix(in oklab)` instead of `rgba()`. Mixed colors are a touch cleaner, mostly noticeable in the lighter backgrounds. The `--tblr-*-rgb` variables are deprecated and stay until 2.0.

The focus indicator is a solid 2px `outline` instead of a `box-shadow` halo, stronger in dark mode. You can tune it per component with `--tblr-focus-ring-width` and `--tblr-focus-ring-color`.

## Floating navbar and offcanvas

`.navbar-floating` detaches the navbar and the sidebar from the edge of the screen with a `0.5rem` gap, and `.offcanvas-floating` does the same for an offcanvas. The theme settings `data-bs-navbar-style="floating"` and `data-bs-offcanvas-style="floating"` on `<html>` switch the whole page.

A native `<dialog>` opened with `showModal()` gets the same backdrop as a modal, and `.modal-blur` on it blurs the page behind. Scrolling to the end of a modal, an offcanvas or a scrollable dropdown no longer scrolls the page behind it.

## Smaller CSS

`tabler.min.css` lost about 110 kB. The button, list group, `bg-pattern-*` and color utility styles are generated once instead of per variant, and the vertical navbar is generated once instead of per breakpoint. The flag, payment and social SVGs in `dist/img` are minified, and only the images the CSS uses are copied.

If you ship your own build, `$enable-deprecated: false` leaves the deprecated aliases and the `--tblr-*-rgb` variables out of the CSS entirely.

## Demo and docs

The demo has a new billing page, a system status panel with 60-day uptime bars, gauge cards on the widgets page and a reworked charts page with sections and legends. The hardcoded Google Maps and Mapbox keys are gone; the map demos read them from the environment.

Component docs pages got a CSS variables section generated from the source, so it can't go stale. Markdown tables and the class reference table sit in a bordered, scrollable box. The CDN snippets carry `integrity` and `crossorigin` attributes. There's a Sortable page, an agent skill under `/.well-known/agent-skills/`, and the upgrade guides moved to `/ui/getting-started/upgrade/` with one page per release.

## Upgrading

Nothing in 1.6 requires a change to your markup. Two things can trip a build:

- 69 Sass variables that were plain colors are `color-mix()` strings now, so they follow `--tblr-*` overrides in the browser. That's the `*-bg-subtle`, `*-text-emphasis` and `*-border-subtle` families, `$body-secondary-color`, `$input-focus-border-color` and a few navbar, dropdown and switch colors. Overriding them still works, but a Sass color function such as `darken()` or `rgba()` on their default value fails. Build from the base color instead: `shade-color(tint-color($primary, 80%), 5%)`.
- The component port is compiled with strict TypeScript and every config is typed. A TypeScript project that passes a loosely typed options object to a component may get new type errors. Nothing changes at runtime.

A few things are deprecated and keep working:

- `.form-hint` is `.form-text` now, matching Bootstrap. The old class is an alias.
- An empty `.legend` still renders as a dot, but `.legend-dot` is the class for it.
- The `$*-focus-box-shadow` variables, `theme-color-lighter()`, `url-svg()`, `varify()` and a few other Sass helpers warn when used.
- The `tabler.tabler` JS namespace with `getColor()` and `hexToRgba()` is deprecated. Read the variable yourself.

Every change, with a before and after example for each one, is in the [Upgrade to 1.6](https://docs.tabler.io/ui/getting-started/upgrade/1-6) guide.