# Changelog Notable changes to ExpressiveCSS. Versions follow [semver](https://semver.org/); the format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). ## [Unreleased] ## [0.16.0] - 2026-10-27 This release removes the aliases kept for markup written before 0.8.0. See Removed and Migration below before upgrading. ### Deprecated - Chip sizing properties `--padding`, `--font-size` and `--font-size-icon`. Use `--md-comp-chip-padding`, `--md-comp-chip-label-size` and `--md-comp-chip-icon-size` instead. Each new property takes priority over its old counterpart. Old overrides on a chip remain supported as fallbacks, defaults are unchanged, and there is no removal date. ### Added - Native multiple-leaf TreeSelect through `` a `name` and the chips submit under it, one `id` per chip, as a multiple select does. `init` wraps the input in ``, the framework's first custom element. It is form-associated, has `display: contents` and takes the name, so half-typed text is not submitted. The browser handles the field's reset, validity and disabled state: a reset puts back the starting chips within the reset, and a disabled fieldset drops the values at once. Setting `disabled`, `readonly` or `form` on the input applies at the next microtask. A `required` input makes the field valid once it has a chip, and says the new `i18n.required` until then, with `aria-required="true"` on the input. That validity is on the control, apart from any error the page sets on the input. A read-only input's field is not required. `destroy()` unwraps the input and gives its name and `required` back. Without form-associated custom elements, as in jsdom, the input keeps its name and `required` and submits its text. Pasting text that lists values, split by commas, tabs or new lines, adds a chip for each, up to `limit`. - Data tables sort and select. With `data-sort` on a `.data-table`, a button in a header cell reorders the rows by its column and moves `aria-sort`. A `numeric` column compares numbers, other columns compare text in the page's language, `data-value` stands in for a cell's text, and a detail row moves with its row. A cancelable `expressive:sort` lets a server-paged table sort the rows itself. A checkbox in the first header cell now selects every enabled row and shows mixed for some, and each change fires `expressive:change` with the selected rows. `Expressive.DataTables.sync()` updates the select-all box after rows are checked from script. Pages that sort with their own script and no `data-sort` are unaffected. - Charts with a series legend take `.toggle`. Each legend item becomes a button with `aria-pressed` that shows or hides its series, and the scale refits to the series left. The other series keep their colors, the last one shown with data cannot be hidden, and a hidden series stays hidden through `update()`. Line, column, bar, mixed and radar charts have it. Without the class the legend stays decorative. - The Auto Init page documents Alpine.js. A short `x-expressive` directive starts a component each time Alpine renders its element, including inside `x-if` and `x-for`, and destroys it when Alpine removes the element. The page also shows how to keep a Select in sync with `x-model` by calling `refresh()`. A browser test runs the directive against Alpine in Chromium, Firefox and WebKit. - Charts have `update()`, which redraws a chart from its changed table in place. Before, the way to redraw was to call `init()` again, which dropped keyboard focus and the highlighted row. Now focus stays on the chart, the highlighted row stays where the table still has it, and a scrolled heatmap stays scrolled. A chart set up with an empty table draws once it has rows. - Tabs can be a tablist. A strip the page writes as `role="tablist"`, with `role="tab"` links naming their panel in `aria-controls`, gets the ARIA tabs pattern: Tabs keeps `aria-selected` and a roving `tabindex`, so the strip is one Tab stop, and Left, Right, Home and End select as they move. Link tabs with `aria-current` stay the default. `semantics.json` allows the roles only when the markup is complete: named, on a `
`, every tab a `role="tab"` with `aria-controls`. In either mode an overflowing bar scrolls the selected tab into view, without scrolling the page, and with no `.active` tab or matching hash the first enabled tab is selected rather than a disabled first one. - Scatter chart. A `
` plots each table row as one point per series: the second column holds the x value, and each further column is a series of y values. `data-x-min` and `data-x-max`, or the `xMin` and `xMax` options, fix the x scale, and `axis` labels both scales. The plot is one Tab stop whose arrow keys step through the points in table order, and it takes `update()`, `data-watch` and a `toggle` legend like the other charts. A new semantics rule asks for a `
` with a `` and a `
`. - Bubble sizes on the scatter chart. With `bubble`, the last column sizes each row's points, so their areas follow its values, and the largest is `--md-comp-scatter-chart-bubble-size` (48px) across. A row without a positive size draws no points. The tooltip names the size, a `toggle` legend refits the sizes, and bubbles grow or shrink from their old sizes after `update()`. Room around the plot keeps a bubble at the end of a scale clear of the axis labels and legend. - Pull-to-refresh. A touch pull down from the top of a `.pull-to-refresh` container, or its `