@expressivecss/expressive 0.14.1 → 0.16.0

package/CHANGELOG.md

@@ -5,6 +5,1592 @@ 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 `<select data-tree multiple>`, with
+  independent leaf toggles, an open popup and optional search retaining hidden
+  choices. Native form submission includes all selected leaves and no branches.
+  Branch defaults never propagate into leaf choices; reset and refresh retain
+  native ownership. Selection and focus remain separate on the named tree.
+
+- Opt-in single-leaf TreeSelect search through `searchable: true`. Matching leaf
+  paths open without changing the native selection. Clearing or closing restores
+  pre-query expansion, including through refresh and disabled-control recovery.
+  Search reuses accessible popup controls, localization and lifecycle handling
+  while retaining tree keyboard behavior and native leaf submission.
+- Independent drop-zone file-count limits through `data-max-files`. Exact-count
+  choices pass; too many files invalidate the complete retained selection with
+  accessible count feedback and `expressive:reject` reason `count`. All selected
+  files appear in independent rejection snapshots. Shared Forms handling keeps
+  type/size precedence, application validity, deduplication and reset recovery.
+- Optional per-file drop-zone byte limits through `data-max-size`, independent
+  of type checking. Exact-limit files pass; one oversized file invalidates the
+  whole retained selection with accessible feedback and `expressive:reject`
+  reason `size`. Combined rules preserve type-first feedback and application
+  custom validity. Constraint-aware deduplication, reset and shadow handling
+  reuse the existing Forms path.
+- Opt-in drop-zone type validation with `data-validate-types`, native form
+  prevention and accessible error feedback. Extensions, exact MIME types and
+  standard media wildcards match whole selections without filtering files.
+  Browse and drop share validation; `expressive:reject` reports invalid choices.
+  Recovery preserves application validity and supports open shadow roots.
+- File reset cleanup now follows native form ownership, including external
+  associated inputs, and runs after reset dispatch/default handling. Canceled
+  resets preserve current file state; newer selections retain their feedback.
+- Server-owned data table paging through silent validated `DataTables.setPage`
+  state and cancelable `expressive:page` requests. Server responses retain
+  every supplied record without local slicing, filtering or sorting. Local
+  page and size controls now request before applying their default; cancel
+  to preserve the accepted view. Null state restores local paging.
+- Authored single-select page-size controls for local data tables. Changing
+  size preserves an available page or clamps to the new last page, retaining
+  selections and matching counts.
+- Local data table paging through a fixed `data-page-size` and authored
+  Previous/Next buttons. Paging follows filtering and sorting, keeps details
+  with records, scopes select-all to the displayed page and preserves
+  selections on other pages. Silent sync clamps the current page after row
+  changes. Ordinary pagination links retain their navigation behavior.
+- Server-owned data table filtering through cancelable `expressive:filter`
+  requests with a trimmed, case-preserving query. Cancel synchronously to
+  preserve the current view, then replace records and call
+  `Expressive.DataTables.sync(wrapper)`. Sync stays silent and preserves the
+  application's server count; an uncanceled input resumes local filtering.
+- Opt-in data table text filtering. A labelled search input with
+  `data-table-filter` searches columns whose headers have `data-filter`.
+  Record details stay together, author-hidden rows remain hidden, and an
+  authored status output can announce the result count. Select-all now
+  affects only enabled records visible in the current view; hidden records
+  retain their selections. To include hidden records in a bulk operation,
+  check them from script and call `Expressive.DataTables.sync(wrapper)`;
+  `expressive:change` continues reporting all selected records.
+- Opt-in select filtering with `FormSelect`'s `searchable` option. A
+  separate popup search field filters grouped options while the native select
+  retains its form value. Includes localized search and no-results text,
+  keyboard navigation, query clearing on close and reset, and query-preserving
+  refresh. On a multiple select, picks keep the popup open with the query and
+  focus in place, and options the query hides stay selected and submitted.
+  Default, tree and browser-default selects keep their behavior.
+- Autocomplete option groups. An entry's `group` lists it under a labelled
+  heading, and entries with the same group gather where the group first
+  appears. Up and Down pass over headings, the announced result count leaves
+  them out, and a click on one chooses nothing. Entries without a group keep
+  their behavior.
+- Disabled Autocomplete entries. An entry with `disabled: true` stays in the
+  results, dimmed, and a click, Enter and `selectOption()` leave it
+  unselected, or selected when the `selected` option or
+  `setMenuItems(items, selected)` chose it. Up and Down skip it, and the
+  announced result count leaves it out. Entries without the flag keep their
+  behavior.
+- Independent gap utilities. `.gap-x-0` through `.gap-x-6` set column gaps and
+  `.gap-y-0` through `.gap-y-6` set row gaps on the existing rem spacing scale.
+  Both support all four window-size prefixes and override the gap shorthand
+  at the same breakpoint. Existing gap utilities retain their behavior.
+- Responsive child sizing. `.flex-1`, `.flex-none` and `.shrink-0` now take
+  window-size prefixes. New `.flex-initial` and `.shrink-1` classes restore
+  content sizing and shrinking, with the same four prefixes.
+- Responsive self-alignment. `.self-start`, `.self-center`, `.self-end` and
+  `.self-stretch` take the `medium:`, `expanded:`, `large:` and
+  `extra-large:` prefixes, and the new `.self-auto` returns a child to its
+  parent's `align-items`. `self-center expanded:self-auto` centers a child
+  until Expanded and then follows the parent. The unprefixed classes are
+  unchanged.
+- Responsive visual order. `.order-first`, `.order-last` and the new
+  `.order-none` (`order: 0`) take the `medium:`, `expanded:`, `large:` and
+  `extra-large:` prefixes. `order-last expanded:order-none` moves a child to
+  the end until Expanded and then back to its source position. The classes
+  change visual order only; Tab and reading order still follow the source.
+- Show more. A `.show-more` holds text with a `line-clamp-1`, `-2` or
+  `-3` class and a `<button>`; the button shows the full text, reads
+  "Show less" while it is open (`i18n.showLess` or `data-show-less`) and
+  sets `aria-expanded` and `aria-controls`. The button hides while the
+  clamped text fits and comes back when a resize or a web font cuts it.
+  New semantics rules require a `<button type="button">` and clamped text.
+- Treemap chart. A `<figure class="treemap-chart">` draws each row of its
+  table's first value column as a rectangle whose area is its share of the
+  total, filling the plot in a squarified layout from the largest value
+  down, mirrored in right-to-left pages. Each rectangle shows its name and
+  cell when they fit, and rows with no positive value draw nothing. The plot
+  is one Tab stop whose arrow keys step through the rectangles in table
+  order, the tooltip adds each row's share, and it takes `update()` and
+  `data-watch` like the other charts. A new semantics rule asks for a
+  `<figure>` with a `<table>` and a `<figcaption>`.
+- Hover card. A link with `hover-card-trigger` names a `.popover` with
+  `popover="hint"` in `aria-details`, and once the pointer or keyboard
+  focus has rested on the link for 500 ms, that card shows against it.
+  The card stays while the pointer or focus is on the link or the card,
+  and hides 300 ms after both are left, or at once on Escape with focus
+  back on the link. A tap or click follows the link and shows no card.
+  Two new semantics rules keep the trigger an `<a href>` whose
+  `aria-details` names a `[popover]`.
+- Transfer list. A `.transfer-list` holds a `.transfer-available` and a
+  `.transfer-chosen` list of checkbox rows with `data-transfer` buttons
+  between them. `add` and `remove` move the checked rows, `add-all` and
+  `remove-all` every row, and a row moved back returns to its original
+  place. The form submits the chosen rows' values under the container's
+  `data-name`, in the chosen list's order, and a form reset puts the rows
+  back. Each move fires `expressive:transfer` with `{ rows, from, to }`
+  and is announced through `TransferList.i18n.moved`. Four new semantics
+  rules ask for `data-name`, unnamed checkboxes, named lists and
+  `type="button"` on the move buttons.
+- Funnel chart. A `<figure class="funnel-chart">` draws each table row as
+  a stage, from the top down in table order, centered and as wide as its
+  value against the largest one. The tooltip adds each stage's percentage
+  of the first row, and further columns show in the tooltip. The plot is
+  one Tab stop whose up and down arrows move between rows, and it takes
+  `update()`, where stages move from their old widths, and `data-watch`
+  like the other charts. A new semantics rule asks for a `<figure>` with a
+  `<table>` and a `<figcaption>`.
+- Sankey chart. A `<figure class="sankey-chart">` draws each table row as
+  a flow: the first column names the source node, the second the target
+  node, and the third holds the value. Nodes stand in columns by their
+  longest path from a source and stack in the order they first appear.
+  Each link is as thick as its value, and each node as tall as the larger
+  of its in and out totals. Rows without a positive value or both names,
+  and rows that would close a cycle, draw nothing. The plot is one Tab
+  stop whose arrow keys step through the links in table order, and it
+  takes `update()` and `data-watch` like the other charts. A new
+  semantics rule asks for a `<figure>` with a `<table>` and a
+  `<figcaption>`.
+- Loading overlay. While the page sets `aria-busy="true"` on a
+  `.loading-overlay`, a surface scrim covers it, its loading indicator
+  shows in the centre, and the script makes the region `inert`, so
+  nothing inside takes a click, a tap or keyboard focus. A visually
+  hidden status region after it announces the start and the finish, in
+  words set with `i18n`, and focus goes back to the control that had it
+  when the region clears. A new semantics rule asks for a direct
+  `.loading-indicator` child.
+- `Dialogs.confirm()` asks a yes-or-no question in a basic alert dialog
+  and returns a promise that resolves `true` on the confirm button and
+  `false` on Cancel, Escape or a scrim tap. Focus starts on Cancel and
+  returns to the opener, and the dialog is removed once it closes.
+  `Dialogs.i18n` holds the default labels, "OK" and "Cancel".
+- `.back-to-top` is an in-page link that appears once the window has
+  scrolled past `threshold`, one viewport height by default. Activating it
+  scrolls to the top, instantly under reduced motion, and focuses the
+  element its `href` names. The `BackToTop` component keeps it `inert`
+  while hidden and watches the threshold with an `IntersectionObserver`.
+  Without the script the link stays visible and jumps to its target. A
+  focused link stays until focus leaves, and modified clicks are left to
+  the browser.
+- `.defer-render` makes the browser skip layout and paint for a long
+  list's off-screen rows through `content-visibility: auto`. Skipped rows
+  reserve `--defer-render-row-size`, the list item height by default, and
+  focus rings inside a deferred row are drawn inset so the row does not
+  clip them. Rows with swipe actions are left alone, and table rows are
+  not supported.
+- Line clamp utilities. `.line-clamp-1`, `.line-clamp-2` and
+  `.line-clamp-3` cut text to that many lines and end the last one in an
+  ellipsis, and `.line-clamp-none` shows every line again. All four take
+  the `medium:`, `expanded:`, `large:` and `extra-large:` prefixes.
+- Pointer helpers. `.pointer-events-none` lets clicks, taps and hovers
+  pass through an element to what lies beneath it, and
+  `.pointer-events-auto` gives them back to a child, such as a button in
+  a caption overlay. `.cursor-pointer` shows the pointer cursor and
+  changes nothing else. Neither pointer-events class affects focus or
+  keys; use `disabled` or `inert` to block all input.
+- `.opacity-0`, `.opacity-25`, `.opacity-38`, `.opacity-50`, `.opacity-75`
+  and `.opacity-100` set an element's opacity. 38 is the M3 opacity for
+  disabled content.
+- `.list-unstyled` removes a `<ul>` or `<ol>`'s markers and inline-start
+  padding and keeps its margins. A new semantics rule,
+  `list-unstyled-has-list-role`, flags one with no `role`, because WebKit
+  drops the list role from a list without markers. Add `role="list"`, or
+  the role the list should have.
+- Position and inset helpers: `.position-absolute`, `.position-fixed` and
+  `.position-static`, `.inset-0`, and the edge pins `.top-0`, `.bottom-0`,
+  `.start-0` and `.end-0`. The start and end pins use logical properties, so
+  they swap sides in right-to-left pages. The classes take a `position-`
+  prefix because the navigation bar, toolbar and table of contents already
+  use `.fixed` as a modifier. They have no window-size prefixes, and
+  `.position-fixed` sets no `z-index`.
+- `.grid-auto-fill` lays out as many columns as fit, each at least
+  `--grid-column-min` wide (15rem by default). Set the property on the grid or
+  an ancestor. A container narrower than the minimum gets one column, and the
+  last row keeps the column width. Pair it with `.gap-*`.
+- Data table column resize. A `<button class="drag-handle">` ending a
+  header cell lets people resize its column by dragging, with the arrow
+  keys (16px, 64px with Shift), Home and End, or a click, Enter or Space
+  that steps through narrow, middle and wide. Each change fires
+  `expressive:resize` from the wrapper with `{ header, column, width }`,
+  and `DataTables.setWidth()` restores saved widths without firing it. The
+  new `--md-comp-data-table-column-min-width` token sets the narrowest
+  width.
+- Data table column visibility. A menu checkbox item with `data-column`
+  set to a first-row header cell's `id` hides that column's header and
+  cells while it is unchecked, and an item unchecked at load starts its
+  column hidden. Cells that span several columns stay, and resized columns
+  keep their widths. `DataTables.sync()` applies the toggles for markup
+  rendered later. The framework stores nothing; save the choice from the
+  menu's `expressive:change`.
+- `.sticky-column` on a `.data-table` keeps the first column in view while
+  the other columns scroll sideways, in both writing directions. When the
+  first column holds row checkboxes, the name cell after it stays pinned
+  too, and the checkbox column takes the width of the new
+  `--md-comp-data-table-checkbox-column-width` token. Pinned cells keep
+  their row's hover and selected colors, and a divider marks their edge.
+- Calendar week, day and year views. `table.calendar.week` and
+  `table.calendar.day` are hourly grids: a row per hour named by a
+  `<th scope="row">`, and a column per day whose header can carry
+  `aria-current="date"`. An event sits in the cell for its day and
+  starting hour and covers one hour, or `--md-comp-calendar-event-duration`
+  hours, starting `--md-comp-calendar-event-start` hours into the row.
+  The placement is only visual, so write each event's time in a
+  `.visually-hidden` span. Events that overlap in time overlap on screen,
+  and an event past the last hour row spills out of the table. `.calendar-year` lays
+  out twelve month tables in as many columns as fit. The new
+  `--md-comp-calendar-hour-height` token sets the row height (48px).
+- `AutoInit(context, options, { watch: true })` keeps watching the
+  context after the first scan. Components start in markup added later,
+  with the same options, markup options and `no-autoinit` opt-out, and
+  are destroyed when their markup is removed. Elements that already have
+  an instance keep it, moved elements keep theirs, and shadow roots are
+  watched only when passed as the context. The call returns a function
+  that stops watching. Without `watch`, `AutoInit()` behaves as before.
+- Timepicker's `minTime` and `maxTime` options bound the times a person
+  can choose, as 24-hour `HH:MM` or `HH:MM:SS`. Dial ticks outside the
+  range are dimmed and refused, the fields stop stepping at the bounds and
+  refuse typed times outside them, and a value outside the range opens at
+  the nearest bound. On a 12-hour clock, a period with no allowed time has
+  its AM or PM button disabled. Ranges can't cross midnight. Without the
+  options every time stays open.
+- Timepicker's `showSeconds` option adds a seconds field after the
+  minutes. It is a spin button named by the new `i18n.seconds`, it steps
+  and takes typed values like the minute field, and the picker writes
+  `HH:MM:SS`, with AM or PM on a 12-hour clock. The dial keeps its hours
+  and minutes views. A `type="time"` input needs `step="1"` to hold the
+  seconds without a step mismatch. The default of `false` keeps `HH:MM`.
+- `AutoInit()` reads options from markup. An element's
+  `data-<name>-options` attribute holds a JSON object of that component's
+  options, with the name in kebab case: `data-menu-options`,
+  `data-form-select-options`. Options passed to `AutoInit()` win for the
+  keys they set. Values must match the kind of their default, so callbacks,
+  elements and `null`-default options stay script-only, as do
+  `allowUnsafeHTML` and the Chips and Autocomplete `data` lists. Invalid
+  values log a warning and keep their defaults. Direct `init()` calls do not
+  read the attribute.
+- Tooltip's `openOnClick` option opens the tooltip on a click instead of
+  hover and focus. A second click, Escape, a click elsewhere or focus moving
+  to another element closes it, and Enter or Space on a button trigger
+  toggles it. On touch a tap is the click, so the long press is off. The
+  default of `false` keeps hover and focus.
+- A chart's `update()` moves its marks from the old values to the new ones.
+  Line chart lines, areas and points, column chart columns, bar chart bars
+  and mixed chart marks move over `--md-sys-motion-duration-medium4` with
+  `--md-sys-motion-easing-standard`. A series or value new to the chart
+  rises from its base, and one that goes away goes at once. With reduced
+  motion the new shape appears at once. Migration: after `update()`,
+  columns and bars no longer grow again from zero, and lines no longer jump
+  to their new shape. No page change is needed.
+- Autocomplete's `allowCreate` option ends the list in an `Add "text"` row
+  when the typed text matches no suggestion exactly, ignoring case and
+  surrounding spaces. Choosing it with Enter or a click calls `onCreate` with
+  the trimmed text and fires `expressive:create` with `{ text }`. The
+  selection does not change; the page adds the entry. `i18n.create` sets the
+  row's label. Chips add the text as a chip, in an `autocompleteOnly` field
+  too.
+- When a search returns no suggestions, Autocomplete's open list shows
+  `i18n.noResults` as its first row, so sighted users see what the live
+  region announces. The row is `li.autocomplete-no-results` with
+  `role="none"` and `aria-hidden="true"`. Arrow keys skip it, and a click on
+  it chooses nothing and keeps focus in the field. It leaves the list when a
+  search returns a match. Arrow keys and Enter now move through
+  `li[role="option"]` rows only. In Chips, Enter that adds the typed text
+  as a chip now closes the list.
+- A chart with `data-watch` on its figure, or the `watch` option, redraws
+  itself when its table changes, so page script no longer calls `update()`.
+  It watches added and removed rows and cells, cell text, and `data-value`,
+  `class` and the heatmap's `data-label` inside the table, and it follows a
+  replaced table. The edits a script makes in one run redraw it once. Every
+  chart type takes it, and `destroy()` stops it. Charts without it behave as
+  before.
+- Autocomplete's `searchDelay` option waits that many milliseconds after
+  typing pauses before calling `onSearch`, so a remote search runs once per
+  pause instead of once per key. A text change aborts the running search's
+  signal right away. A search on focus runs at once, and blur, `destroy()`
+  or choosing a single result cancels a pending one. The default of `0`
+  keeps the search on every input. Chips take it through
+  `autocompleteOptions`.
+- A menu item with `role="menuitemradio"` checks itself and unchecks the
+  other radio items in its group. A group is a `<ul role="group">` with an
+  `aria-label` inside an `<li role="none">`; radio items outside a group form
+  one group per menu. Rows in a group are styled and reached by arrow keys
+  and type-ahead like any other row. A click or Enter checks the item and
+  closes the menu while `closeOnClick` is on. Space now checks it and keeps
+  the menu open, where it used to close the menu. A change fires
+  `expressive:change` from the trigger with `{ item, checked: true }`, after
+  `onItemClick` and `expressive:select`; choosing the checked item fires no
+  change. Page code that synced `aria-checked` on radio items can go. It
+  writes the same values, so leaving it in place does no harm.
+- A menu item with `role="menuitemcheckbox"` toggles its own
+  `aria-checked`. A click or Space flips it and keeps the menu open, so
+  several items can be toggled in a row; Enter flips it and closes the menu
+  while `closeOnClick` is on. Each toggle fires `expressive:change` from the
+  trigger with `{ item, checked }`, after `onItemClick` and
+  `expressive:select`. Migration: a page that flipped `aria-checked` itself
+  in `onItemClick` or a click listener must remove that code, or the two
+  flips cancel out.
+- A `.validate` field sets `aria-invalid="true"` along with `invalid`, and
+  clears both once the value passes, so a screen reader hears the error
+  state the color shows. Its `[data-error]` supporting text joins the
+  input's `aria-describedby`, keeping the ids already there, so the error
+  message is read with the field. An empty `data-length` no longer marks a
+  field invalid.
+- Tooltips show on a long press on touch, as Android does: after half a
+  second held, without `enterDelay`, staying for a second and a half after the finger lifts. A
+  tap used to show the tooltip through its compatibility mouse events and
+  leave it up until the next tap elsewhere; a tap now shows nothing, and a
+  press that turns into a scroll shows nothing. The click a long press's
+  release sends is consumed, so it does not press the button or follow the
+  link.
+- Menus take `placement: 'top'` to open above the trigger when they fit
+  there, as for a trigger in a bottom bar, and Home and End jump to the
+  first and last rows. An anchored menu that does not fit below its trigger
+  now opens above it when there is more room there. Its height was capped
+  to the room below, so it shrank and scrolled instead of flipping.
+- Chips submit a form value. Give the field's `<input>` a `name` and the
+  chips submit under it, one `id` per chip, as a multiple select does.
+  `init` wraps the input in `<expressive-chips-control>`, 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 `<div>`, 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 `<figure class="scatter-chart">` 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 `<figure>`
+  with a `<table>` and a `<figcaption>`.
+- 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 `<button data-refresh>`, fires `expressive:refresh` and
+  shows the container's loading indicator with `aria-busy="true"` until
+  every promise passed to `event.detail.waitUntil()` settles or the page
+  calls `complete()`. The `threshold` option sets the pull distance (64px).
+  A visually hidden status region announces the start and the finish, in
+  words set with `i18n`. The container and the page holding it get
+  `overscroll-behavior-y: contain`, so the browser's own pull-to-refresh
+  stops. New semantics rules
+  ask for the button and a direct `.loading-indicator` child.
+- Swipe actions. In a `.list.swipeable`, a touch swipe toward a row's
+  inline start slides it and reveals its `.swipe-actions` buttons. A swipe
+  only reveals; nothing runs until a person presses an action. The row's
+  `<button data-swipe-toggle>` opens and closes it without a swipe, focus
+  on an action opens its row, and Escape, a tap outside or an action closes
+  it. One row is open at a time. Each change fires `expressive:swipetoggle`
+  with `{ row, open }` and runs `onToggle`; `open(row)` and `close()` work
+  from script. A new semantics rule asks for the toggle in every row with
+  actions.
+- Input mask. A text field with `data-mask` formats what people type,
+  paste or compose to the pattern: `0` takes a digit, `a` a letter, `*`
+  either, and other characters are literals the mask writes, such as
+  `(000) 000-0000`. The caret stays after the edit, Backspace and Delete
+  remove the digit across a literal, an IME composition is formatted once
+  it ends, and saved and reset values are formatted too. The form submits
+  the value as shown. A new semantics rule keeps `data-mask` on input types
+  that have a caret.
+- Currency input. A text field with `data-currency="EUR"` shows its
+  amount in the page's locale and that currency once it loses focus, such
+  as `1.234,50 €` under `lang="de"`, and the plain number `1234,5` while
+  it has focus. The last `.` or `,` is the decimal mark when no more than
+  the currency's fraction digits follow it, so `1234.5` and `1.234,5` read
+  the same. The form data holds the plain number, `1234.5`. Text with no
+  digit stays as typed and marks the field invalid, with a message `i18n`
+  can replace. The instance's `value` returns the number. A new semantics
+  rule keeps `data-currency` on text inputs.
+- Cascader. A `.field.cascader` with a named text input and nested
+  `ul.cascader-options` lists shows the options as columns in a popover,
+  where each choice opens the next column. Arrow keys, Home, End, Enter,
+  Space, Escape and Tab move through the columns, swapped under `rtl`.
+  Choosing a leaf shows the path in the input and fires `input` and
+  `change`, and the form gets one entry per level, such as `place=us`,
+  `place=ca`, `place=sf`, through a form-associated control. `data-selected`
+  on a leaf sets the starting path, which a reset brings back, and
+  `required` blocks submit until a path is chosen. New semantics rules keep
+  the source lists plain and every option valued.
+- Tree select. A `<select data-tree>` whose options name their parent's
+  value in `data-parent` opens an ARIA tree, where the arrows, Home, End,
+  `*` and typeahead move between visible rows and only a leaf can be
+  chosen. The native select keeps the form value, reset and validity, and
+  branch options are disabled while it runs, so the form never submits
+  one. `refresh()` keeps open branches and focus. AutoInit starts
+  `TreeSelect` on `select[data-tree]` and FormSelect on other selects, and
+  a new semantics rule keeps `data-tree` on single selects nested only
+  through `data-parent`.
+
+- A `data-draggable` map marker moves without a drag (WCAG 2.5.7). A tap
+  picks it up and sets `aria-pressed`, and the next tap on the map drops it
+  there. `Escape` or a second tap puts it back, and the arrow keys nudge a
+  focused one. A marker that is not a `<button>` gets `role="button"` and
+  `tabindex="0"` while the map runs.
+- Map controls take `pan-up`, `pan-down`, `pan-left` and `pan-right` actions,
+  which move the view a third of the map's size, so it pans without a drag.
+
+- Menu, Lightbox, NavigationRail, Cards and ExpandingCard fire
+  `expressive:open` and `expressive:close` DOM events from the element
+  they were initialized on. Menu, Lightbox and NavigationRail then fire
+  `expressive:opened` and `expressive:closed`. The events bubble and cross
+  shadow roots, and each follows its `on…` callback, which still works.
+
+- Choices and changes fire events too, with what was chosen in `detail`:
+  `expressive:change` from Tabs (`{ panel }`) and Carousel
+  (`{ item, dragged }`), `expressive:select` from Menu items (`{ item }`),
+  Datepicker (`{ date }`) and Timepicker (`{ hours, minutes }`),
+  `expressive:confirm` and `expressive:cancel` from both pickers,
+  `expressive:autocomplete` (`{ values }`), and `expressive:chip-add`,
+  `chip-select` and `chip-delete` (`{ chip }`). A callback that changes the
+  choice again leaves only the event for the final one. Tabs now calls
+  `onShow` after hiding the old panel, and Chips callbacks get the instance
+  as `this`, as every other component's do.
+
+- The rest report too: Tooltip fires `expressive:open` and
+  `expressive:close` when it shows and hides; Snackbar fires `open`,
+  `action`, `close` and `closed`; ButtonGroup fires `change` with
+  `{ button, pressed }`; ScrollSpy fires `change` from the section with
+  `{ link }`; Tour fires `open`, `change` with `{ step, index }` and `close`
+  with `{ completed }`; and copy buttons fire `expressive:copy` with
+  `{ text, copied }`. `Tour.end(el, completed)` takes the flag from script.
+
+- Sheets spring back with the finger's speed: a bottom or side sheet
+  released short of dismissing solves its spring at run time from where
+  it is and how fast it moves, and a press while it springs catches it in
+  place. Each motion spring gains `-damping` and `-stiffness` tokens.
+
+- Arabic, Hebrew and Thai text: Noto Sans Arabic, Noto Sans Hebrew and
+  Noto Sans Thai ship at 400, 500 and 700, each limited to its script's
+  `unicode-range` so a page fetches one only when it shows that script,
+  and `--md-ref-typeface-fallback` lists them before `sans-serif`.
+
+- Autocomplete `onSearch` gets an `AbortSignal` as its third argument. It
+  aborts when a newer search starts or the autocomplete is destroyed, so a
+  page that passes it to `fetch()` drops stale responses.
+
+- Linear progress `.stop` puts a dot in the indicator colour at the
+  track's end, and `.wavy` draws the indicator as a wave over a thin track,
+  on `<progress>`, `.determinate` and bare bars, and a circular indicator
+  takes `.wavy` too: a wave round the ring over a thin track. New tokens:
+  `--md-comp-progress-stop-size` and `--md-comp-progress-wavelength`.
+
+- Common button shapes: `square` takes the size's squared corner, every
+  common button morphs to its size's pressed corner while pressed, and
+  `aria-pressed` makes a button a toggle that swaps round and square when
+  selected and takes the M3 selected colours for its style.
+
+- Questionnaire extras, each opt-in on the form: `data-shortcuts` lets a
+  letter or digit pick an answer, `data-summary` adds a review step that
+  lists every answer with an Edit button before submitting, and
+  `data-save="key"` keeps the answers and the shown question in
+  localStorage until the form is submitted.
+
+- Keypad and keyboard keys: `data-key="CapsLock"` holds capitals until
+  pressed again, and `data-key="Layer"` shows the elements whose
+  `data-layer` matches its `value`, such as a row of symbols. A hardware
+  key held down in the field presses the matching on-screen key. The
+  keypad now checks `minlength` on its own edits, with the
+  `i18n.tooShort` message.
+
+- Radial chart fills: `data-segments` splits each ring into segments filled
+  whole, and `.gradient` shades each fill along its ring, from a light
+  tint at the start to its full color where the fill ends.
+
+- Range columns and bars: a series header with the class `range` reads
+  cells such as `120–480`, `3 to 14` or `data-value="120 480"` and floats a
+  column or bar between the two ends, rounded at both.
+
+- Mixed chart stacking: `.stacked` stacks the column series into one
+  column per row, with the `end` scale's columns in their own column
+  beside it. Lines and areas keep their own values.
+- Line and mixed chart `.points` marks every value on a line with a dot,
+  and `.straight` draws straight lines between values instead of a curve.
+
+- Heatmap scales: `data-mid` makes the scale diverge from that value, with
+  values below it shading towards the new
+  `--md-comp-heatmap-chart-low-color` (`tertiary`), and `data-steps` groups
+  the shades into bands, with a swatch per band under the grid.
+- Wide heatmaps scroll: cells keep `--md-comp-heatmap-chart-cell-min-width`
+  (12px), and a grid too wide for its figure scrolls its cells sideways
+  instead of narrowing them, while the row labels stay in view. The arrow
+  keys scroll the cell they move to into view.
+
+- Pie chart grouping: `data-other="5"` turns every row under 5% of the
+  whole into one last slice with their sum and share, named by
+  `data-other-label` ("Other" by default). The table keeps every row.
+- Radial chart names: `.labels` draws the rings three quarters of the way
+  round and writes each row's name in the empty top left quarter, beside
+  its ring's start. Names shrink to fit crowded rings. On a gauge, the names
+  hang under the base line, a row per ring with the innermost on top, each
+  after a line down from its ring's start. A sparkline ignores it.
+- Pie chart names: `.labels` writes each slice's row name outside the pie,
+  beside its slice. Names that would touch move apart along their side, a
+  line leads from each name back to its slice, and the pie shrinks to leave `--md-comp-pie-chart-label-width` (96px), or a
+  quarter of a narrow figure, on each side.
+- Expandable bottom sheets: `dialog.bottom-sheet.expandable` opens at
+  `--md-comp-bottom-sheet-partial-height` (50% of the viewport) and
+  `.expanded` grows it to the full height. A drag up expands it, a drag
+  down collapses it before it dismisses, and a handle `<button>` switches
+  between the heights with `aria-expanded` kept current.
+- Arrow keys for tabs and lists: Left, Right, Home and End move focus
+  between tabs, wrapping and skipping disabled ones, and Up, Down, Home and
+  End move it between the rows of a `.list` whose rows are each one link or
+  button. Tabs and rows stay links and Tab stops; focus moves without
+  choosing. The list keys come from the new `Lists` behavior.
+- Modal date and time pickers: `displayPlugin: 'modal'` opens the picker in
+  a modal `<dialog class="display-modal">` drawn as a basic dialog, named by
+  the input's label. Ok writes the input; Cancel, Escape and a press on the
+  scrim close it without a change and call `onCancel`. Focus moves into the
+  dialog and back to the input. Selective Sass builds add `"dialog"` and
+  `"modal-display"`.
+- Value axes for charts: `.axis` on a line, column, bar or mixed chart
+  labels its value scale at round values, with a grid line at each, and
+  widens an end the chart chose to the next round value. The labels repeat
+  the cells' currency or percent sign and shorten large numbers. A mixed
+  chart labels its `end` scale on the far side and stretches it so both
+  label sets share the grid lines. On a radar chart, `.axis` rings the grid
+  at round values and labels the rings.
+- Non-Latin text faces: Roboto and Noto Sans now ship Latin Extended,
+  Cyrillic, Cyrillic Extended, Greek, Greek Extended and Vietnamese subsets,
+  and Noto Sans adds Devanagari, at 400, 500 and 700. Each face has a
+  `unicode-range`, so a browser downloads only the scripts a page renders.
+- Cut corners: `--md-sys-shape-corner-family` (`round` or `bevel`), a
+  `corners="cut"` switch that cuts the corners of cards, dialogs, sheets,
+  menus, fieldsets, buttons, chips, alerts, snackbars, tooltips, popovers and
+  outlined fields, and a `.corner-cut` utility. Built on CSS `corner-shape`;
+  browsers without it keep rounded corners.
+- Spring motion tokens from Material 3 Expressive:
+  `--md-sys-motion-spring-{fast,default,slow}-{spatial,effects}` with a
+  `-duration` token each, solved at compile time into `linear()` easings.
+  `motion="expressive"` on the root or a subtree selects the expressive
+  spatial springs. The Sass `spring($damping, $stiffness)` and
+  `spring-duration()` functions build custom ones.
+- Emphasized type roles from Material 3 Expressive: `.{role}-emphasized`
+  classes for all fifteen roles and
+  `--md-sys-typescale-emphasized-{role}-font-weight` tokens, at `500` for
+  display, headline, title-large and body and `700` for title-medium,
+  title-small and label. Roboto and Noto Sans now ship a `700` face, fetched
+  only when a page renders that weight.
+- A "Design tokens" documentation page at `/tokens.html` lists every token
+  family, its prefix and the page that documents it, with an override
+  example.
+- Material 3 motion tokens: `--md-sys-motion-easing-*` for the standard,
+  emphasized and linear curves and `--md-sys-motion-duration-short1` to
+  `extra-long4`. Components now read them wherever they used an on-scale
+  curve or time, so `:root { --md-sys-motion-duration-short4: 150ms; }`
+  speeds up every 200ms transition. Computed values are unchanged.
+- Material 3 corner tokens: `--md-sys-shape-corner-none` to `full`, with the
+  Expressive `large-increased`, `extra-large-increased` and
+  `extra-extra-large` steps. Component shape tokens on the scale read them,
+  so `:root { --md-sys-shape-corner-medium: 8px; }` squares off every medium
+  corner. Computed values are unchanged.
+- Elevation tokens: `--md-sys-elevation-level0` to `level5` and
+  `level1-half`, generated from the `$elevations` map. The `z-depth()`
+  mixin, the `.z-depth-*` classes and every component read them, so a theme
+  can change a shadow level at runtime. Computed values are unchanged.
+- `--expressive-z-*` properties name the stacking order of fixed and floating
+  surfaces, from `toolbar` (996) to `confetti` (10001). Components read them
+  instead of literal `z-index` values, and the Shadow page lists them.
+- Layout helpers take a window-size prefix: `.medium:`, `.expanded:`,
+  `.large:` and `.extra-large:` versions of the display, flex direction and
+  wrap, `justify-*`, `align-*`, text alignment, `.gap-*`, margin and padding
+  classes, and `.hide`, apply from that size class up, so
+  `flex flex-column expanded:flex-row` stacks until Expanded.
+- More helpers: `.block`, `.inline-block`, `.grid`, `.inline-grid`,
+  `.contents`, `.relative`, `.sticky-top`, `.flex-row`, `.flex-nowrap`,
+  `.justify-around`, `.justify-evenly`, `.align-baseline`, `.self-*`,
+  `.order-first`, `.order-last`, `.shrink-0`, `.w-full`, `.h-full`,
+  `.max-w-full`, `.aspect-1x1`, `.aspect-4x3`, `.aspect-16x9`,
+  `.object-cover`, `.object-contain`, `.bordered`, `.border-top`,
+  `.border-bottom`, `.border-start`, `.border-end`, `.corner-none` to
+  `.corner-full`, `.text-balance` and `.text-pretty`.
+- Print styles. Paper uses the light scheme and hides navigation rails,
+  navigation bars, the FAB menu, snackbars and tooltips. External links in running text print their address, headings
+  stay with what follows, and table headers repeat on each page.
+  `.hide-on-print` and `.print-only` cover the rest.
+- `.prose` styles a container of bare HTML, such as rendered Markdown: a
+  70-character measure, heading and list spacing, underlined links in lists
+  and headings, and a surface for inline code and `<pre>`. It only touches
+  elements without a class and sits in the base layer, so components inside
+  it keep their own look.
+- `.query-container` makes an element a query container. Horizontal cards
+  and description lists inside one stack when it is narrower than 600px, so
+  they adapt to a sidebar or pane on a wide window.
+- Contrast levels: `contrast="medium"` and `contrast="high"` on the root or
+  a subtree select M3's medium and high contrast schemes. Accents, their
+  containers, `on-surface-variant` and outlines move to tones that reach
+  about 4.5:1 and 7:1 against the surface. `prefers-contrast: more` applies
+  the high scheme unless a `contrast` attribute is set, and
+  `contrast="standard"` opts out.
+- Color swatches component: a `fieldset.color-swatches` of radios in
+  labels with visually hidden names, each drawn as a round chip of the color
+  set in `--md-comp-color-swatch-color`, with a ring around the checked one.
+  An `<input type="color">` at the end adds a custom value. CSS only.
+- Number stepper: two trailing `.icon-button.suffix` buttons with
+  `data-step="down"` and `data-step="up"` in a `.field` step its
+  `<input type="number">` within `min`, `max` and `step`, and fire `input`
+  and `change`. The browser's spin buttons are hidden. The Forms behavior
+  handles it, so there is nothing to initialize.
+- Color picker component: `ColorPicker` enhances a `.color-picker` around an
+  `<input type="color">` with a saturation and brightness area, the
+  framework's slider as a hue control, and a hex field. The native input stays
+  the form value and fires `input` and `change`. The area is a keyboard
+  slider with a spoken value. AutoInit starts it.
+- A "Frosted glass" documentation page at `/glass.html` covers the
+  `--expressive-glass`, `-blur` and `-opacity` properties, the Sass defaults,
+  the surfaces that frost, and the reduced-transparency fallback, with live
+  demos. A button in the docs app bar turns glass on across the site.
+- A navigation rail destination can open a `.navigation-rail-panel` side
+  panel of more links. Make the destination a `<button popovertarget>` and
+  put the panel popover right after it. The panel docks beside the rail at
+  full height, a click toggles it, and with a mouse hovering the destination
+  opens it. `<details>` groups inside the panel are its dropdowns.
+- `.org-chart` draws a reporting line top down, with each person as a card
+  under their manager. Write nested lists; a manager's card is the
+  `<summary>` of a `<details>` that folds the team away. Cards take an
+  `.org-chart-role` band, an `.avatar` and an `.org-chart-name`. A wide
+  chart scrolls sideways. CSS only.
+- The `expressivecss-migration` agent skill moves a project from Materialize
+  or an older 0.x release to current names in eight steps: package and
+  assets, JavaScript API, removed components, classes and markup, the aliases
+  0.16.0 removes, silent visual changes, and verification. Each step ends with a
+  search for the names it replaces, and the skill installs on its own with
+  `npx skills add BaezFJ/ExpressiveCSS`.
+- An "AI agents" documentation page at `/ai.html` lists the plain-text docs,
+  the install command for the agent skills, the MCP server configuration and
+  the `expressivecss-lint` command. Its skills table is read from each
+  `skills/<name>/SKILL.md`, so a new skill appears without editing the page.
+- Menubar component: a `.menubar` of `.menu-trigger` buttons gets the menubar
+  and menuitem roles, one Tab stop, Left, Right, Home and End along the bar,
+  and Left and Right between open menus. Each item opens an ordinary Menu.
+  AutoInit starts it.
+- Mega menu component: a `nav.mega-menu` of links and buttons whose
+  `.mega-menu-panel` popovers open wide panels of grouped links below the bar.
+  CSS only, on native popovers.
+- Tour component: a `.tour` manual popover walks through `<section>` steps
+  beside each `data-tour-target`, with Back, Next, Done, progress text,
+  skipped missing targets, Escape and focus return. `Expressive.Tour` adds
+  `start()`, `go()` and `end()`.
+- Image compare component: a `.image-compare` reveals its second image up to
+  a native range input's value. The `ImageCompare` behavior moves the
+  divider, and Slider no longer initializes that range.
+- Calendar component: a page-rendered `table.calendar` draws a month grid
+  with weekday headers, today, outside days and event chips. CSS only.
+- Sortable lists: a `.sortable` list reorders by dragging an item's
+  `.drag-handle` or with its `[data-move]` buttons, announces each move and
+  fires `change` with `{ item, from, to }`. Semantics require the buttons.
+- `<input type="color">` is drawn as a round swatch of its color.
+- Description list component: `dl.description-list` lays out label and value
+  pairs in two columns with a divider per pair, stacking each label above its
+  value at Compact widths. CSS only.
+- Error summary: an `.error-summary` alert in a `novalidate` form stops an
+  invalid submit, lists one link per invalid field with its label and the
+  browser's message, and takes focus. Each link focuses its field. Part of
+  the Forms behavior.
+- Resizable panes: a `<button class="drag-handle">` between the two panes of
+  a list-detail or supporting layout resizes them by drag, arrow keys, Home
+  and End, or a click that steps through narrow, middle and wide. The
+  `PaneResize` behavior writes `--md-comp-pane-list-width` or
+  `--md-comp-pane-supporting-width`.
+- Data table bulk actions and row expansion: a `.data-table-actions` bar
+  joins the table's top edge and takes the selected color while rows are
+  selected, and a `tr.data-table-detail` shows while the row before it holds
+  a button with `aria-expanded="true"`. CSS only; the page flips the state.
+- Alert component: `.alert` is a persistent message in the page flow with an
+  optional leading icon, a heading and text, an `.alert-actions` row and a
+  close button. `critical` switches to the error container colors. CSS only.
+  It replaces the banner as the answer for persistent, nonblocking messages,
+  and the banner migration page now points to it.
+- `<meter>` gets an 8px bar on a `secondary-container` track. The fill is
+  `primary` in the optimum region, `tertiary` one region away and `error` two
+  away, from the native `low`, `high` and `optimum` attributes. No class is
+  needed, so existing meters change appearance and fill their container's
+  width; set `width` on a meter to keep it inline.
+- Copy buttons: `data-copy-for="id"` copies a field's value or an element's
+  text, and `data-copy="text"` copies the text itself. A snackbar confirms the
+  result. `Expressive.Copy.i18n` and `data-copy-message` / `data-copy-error`
+  replace its texts.
+- Theme switch: `data-theme-set="light|dark|auto"` on any control writes the
+  `theme` attribute, saves the choice to `localStorage` and marks the current
+  control with `aria-pressed` or `aria-checked`. `Expressive.Theme` adds
+  `set()`, `get()` and `sync()`. Restoring a saved choice before first paint
+  stays with the page's inline script.
+
+### Fixed
+
+- Nonsearch TreeSelect opening now honors Menu `autoFocus: false` and preserves
+  focus already moved to a tree row before its opening animation completes.
+
+- Searchable tree rows inherit the shared menu tokens, preserving visible
+  keyboard focus, selected colors and row spacing in light and dark themes.
+- Search popups resize after filtering so translated no-results feedback and
+  newly exposed tree paths fit, including inside transformed containers.
+- Search popups stay hidden for controls initialized while disabled. Enabling
+  the control and calling `refresh()` restores normal interaction.
+- Searchable selects preserve focus on a result reached before the opening
+  animation finishes, so Enter still chooses that result in dialogs and shadow roots.
+- Escape dismisses an anchored menu while its opening animation still leaves
+  focus on the trigger, including a searchable select reopened from the keyboard.
+  A closed menu leaves Escape available to its surrounding dialog or page.
+- Navbar form inputs and card media captions use their complete body-large
+  and title-medium type roles, including letter-spacing. Existing captions
+  now use title-medium tracking, which can change their text width or wrapping.
+- The Timepicker canvas fade reads `--md-sys-motion-duration-short3`, changing
+  its default from 175ms to 150ms. Expanded card content reads the new
+  `--md-comp-expanding-card-content-delay` property, backed by
+  `--md-sys-motion-duration-short4`, changing its default delay from 180ms to
+  200ms. Both follow token overrides and keep their reduced-motion resets.
+  Timepicker's JavaScript timers and `duration` option are unchanged.
+- The map popup's shadow reads `--md-sys-elevation-level2`, so a theme
+  that changes that token changes the popup too. The shadow was written
+  out in full, so the popup kept the default level 2 shadow while menus
+  and cards followed the theme. It still overrides MapLibre's own shadow.
+- Chips grow with the browser's font size. Labels read the label-large
+  font-size token, and the icon, minimum height, avatar, close-button box
+  and editable input use rem sizes. At a 32px root, the default label is
+  28px and minimum height is 64px. Default rendering at a 16px root,
+  px spacing and existing custom-property overrides remain unchanged.
+- Icons grow with the browser's font size in dialogs, snackbars, alerts,
+  lists, trees, timelines, the command palette, message avatars, the map
+  popup, fieldset legends, the drop zone and the dialog, side sheet and
+  pane header actions. Their sizes were in px, so the text beside
+  them grew and the icons didn't. Icon boxes in the same rules grow with
+  them, and the timeline text and the map popup text clear the larger
+  badge and close button. A short timeline event stays tall enough that
+  its badge doesn't overlap the next one. The Timepicker's tick text grows too; its dial
+  and ticks stay in px because the script places ticks in px. At the
+  default 16px size nothing moves.
+- A single-line list row sits in the middle of the row. The row grid's
+  empty second line stretched, so the text sat 4px above its leading icon
+  in most rows. A checkbox or radio label row also took the control's
+  12px row gap and sat 7px high. In a row taller than its text, the
+  headline and its supporting text now sit together in the middle instead
+  of being pushed apart. A checked checkbox in a label row shows its
+  checkmark on the box, not 16px before it.
+- A table cell with the `hidden` attribute is hidden. The global `td, th`
+  rule set `display: table-cell`, which overrode the browser's
+  `[hidden]` rule.
+- Security: Autocomplete with `allowUnsafeHTML` renders only a script-supplied
+  `text` as HTML. A `selected` id that has no data entry, which
+  `data-autocomplete-options` can set, used to become HTML too, so sanitized
+  user markup that kept the component's class and options attribute could
+  run script once the menu showed no results.
+- Security: a questionnaire with `data-save` no longer stores password or
+  hidden inputs. It used to keep a password in `localStorage` as plain text
+  until submit, and to restore both into the next visitor's form, which
+  replaced the server's hidden values. Saved progress from an earlier
+  version no longer matches and starts fresh.
+- A docked date or time picker, and a tooltip placed without CSS anchor
+  positioning, stay beside their trigger on a page scrolled sideways and
+  inside the body's margin. They used to be kept inside the body's box,
+  which scrolls with the page, so a picker that fit the viewport could jump
+  to its right edge. They are now kept inside the viewport only, and a
+  docked picker with an `align` other than `left`, `center` or `right` is
+  kept in view like a left-aligned one.
+- `@use "expressive" with ($text-color: …)` colors the page text. The
+  variable was written on `html`, where the `body` rule's own on-surface
+  color covered it, so it only took effect inside a shadow root. `body`
+  and `:host` now take their color from `$text-color`. The default is
+  unchanged.
+- MCP static inspection checks the `require-idref` and
+  `require-owned-descendant` rules from `semantics.json`. The server kept
+  its own copy of the rule helpers, which had drifted and skipped both, so
+  markup that passed before can now get findings. It now imports the same
+  rule module the repo's semantics checks use.
+- Timepicker reads AM or PM wherever it appears in a value, so
+  `02:30:45 PM` opens at 2:30 PM. The period was looked for only after the
+  first colon, so such a value, or one like `2 PM`, opened as AM.
+- With a query typed, the first Escape in the command palette clears it and
+  the next closes the palette, in every engine. Chromium and Firefox already
+  did this for a search input; WebKit closed at once, and so did every
+  engine for a text input. An Escape that cancels an IME composition is left
+  to the IME.
+- In forced colors, a filled keypad key such as Call has a 3px edge. The
+  fill that set it apart is dropped there, so it looked like every digit.
+- In forced colors, a determinate circular progress draws its track as a
+  thin line through the ring, so the value and the track differ in shape.
+  Both were full-width rings, told apart only by GrayText against
+  CanvasText, which Night sky sets close together.
+- A narrow heatmap shows whole column labels. Like the line, column and
+  mixed charts, it keeps every second label (or every third, and so on)
+  when each is wider than its column, instead of cutting all of them to
+  "W…". Labels the author already spaced out with empty `data-label`
+  cells, such as a year of weeks named once a month, are left as written.
+  The labels are now measured where they sit, so the columns' gaps and
+  right-to-left grids are counted.
+- Pie slices 5 and 6 stand out from the surface. They took
+  `primary-container` and `tertiary-container`, which are 1.3:1 on the
+  surface in light mode and 2:1 in dark, under the 3:1 a slice needs. Each is
+  now its container role mixed 45% with `on-surface`: the same hue, at 5:1
+  in light and 6.8:1 in dark. `.values` text on them is `surface`. A page
+  that sets `--md-comp-pie-chart-color-5` or `-6` keeps its own colors.
+- In forced colors, an invalid checkbox has a dashed edge. Forced colors
+  drop the error color, so it looked like any other box. A checked invalid
+  box used to paint the author's error red and on-error mark, because the
+  error rules outranked the forced-colors ones; it now takes Highlight and
+  HighlightText like any checked box, and a disabled one stays GrayText.
+- Chart cards in the docs keep their contents off the border, and the
+  period switch sits beside the stat instead of on a row of its own. The
+  column chart page now says a card needs `p-4` around its stat and chart,
+  as the line chart page already did.
+- A narrow line, column or mixed chart shows whole row labels. When each
+  label is wider than its column, the chart keeps every second label (or
+  every third, and so on) and hides the rest, rather than cutting all of
+  them to "J…". Twelve months on a 320px phone show as six. The chart
+  re-checks as it resizes, and the full text stays in the tooltip and the
+  table.
+- A top app bar whose destinations do not fit beside the title wraps them
+  onto a second row. Before, the title shrank to one letter and an
+  ellipsis. On one row the bar is unchanged.
+- In WebKit, the keyboard can scroll a docs code sample that is wider than
+  its block. Chromium and Firefox already put such a block in the Tab
+  order; WebKit skipped it.
+- The Carousel page shows the Show all action it recommends, opening a
+  full-screen dialog of the same items. It is the single-pointer way
+  through a carousel (WCAG 2.5.7), and no demo had it.
+- The Enter that confirms an IME candidate no longer acts on a field. In
+  the date picker it moved focus into the calendar and read the unfinished
+  text; the time picker, the autocomplete's active option and the color
+  picker's hex field also took it. The date picker, time picker and
+  autocomplete now skip every key of a composition, so the arrows and
+  Escape used to pick a candidate leave them alone too.
+  `Utils.isComposing(e)` checks `isComposing` and Safari's keyCode 229, and
+  Chips, Command palette, Menu and Questionnaire now share it, so Menu and
+  Questionnaire also skip Safari's confirming Enter.
+- A keyboard-focused slider handle takes the shared 3px focus ring. Its only
+  cue was a 10% tint around the handle, about 1.1:1 against the surface.
+- In a browser without CSS anchor positioning, a popover is centered in the
+  viewport. It used to land in the top-left corner, far from its button.
+- A scrolling marquee no longer restyles every item on each frame. The
+  reset's `box-sizing: inherit` tied each item's style to its moving group,
+  so on a page that also drew every frame, each frame restyled every item
+  as well as the groups. Items now set `box-sizing: border-box` themselves.
+- A dot map marker takes taps in a 48dp circle around its 16dp dot. It was
+  a 16px target on a map that is itself a target, under WCAG 2.5.8's 24px
+  minimum.
+- A snackbar with `displayLength: Infinity` gets its close button by
+  default, as one with an action does. Without an action it could otherwise
+  only be swiped away. An explicit `dismissible: false` is kept.
+- A `nowrap` breadcrumb scrolls sideways as documented. Its crumbs used to
+  shrink below their text, so each separator sat on the last letter of the
+  crumb before it.
+- A list row's trailing `span.badge` or `span.meta` stays in the last
+  column. The label rule matched it and outranked the trailing rule, so a
+  bare-text label like "Inbox" was pushed after the badge.
+- Controls grow with their text. Type is set in `rem`, but buttons, icon
+  buttons, FABs, badges, avatars, keypad keys, text fields, selects, the
+  app bar, the search bar and the slider's inset icon used `px` boxes. With
+  a larger browser font size or 200% text-only zoom, their labels and icons
+  spilled out or were cut, and a field's floating label sat on its value.
+  Those sizes are now `rem` (a new `rem()` Sass function), so pages render
+  the same at the default 16px. A field's clearance for its prefix, suffix,
+  password toggle and number stepper grows with them.
+- Charts, cards, stats, KPIs and the org chart grow with their text too:
+  - the chart height, y-axis width, bar and heatmap row heights, pie label
+    room, radar label room and tooltip width;
+  - the small, medium and large card heights;
+  - the stat tile minimum;
+  - the KPI icon box;
+  - the org chart card width.
+  At 200% text, axis labels no longer shrink to "8…" or "$…", a pie or
+  radial total stays inside its ring, and stat tiles wrap instead of
+  breaking "$48.2k".
+- A trigger with both a Tooltip and a Menu keeps both anchors. Each wrote
+  the whole `anchor-name` property, so the second replaced the first, and
+  destroying either removed the other's. Tour targets share the same list.
+
+- Timepicker on an `<input type="time">` writes 24-hour `HH:mm`. A
+  12-hour picker wrote `02:15 PM`, which a time input rejects by emptying
+  itself.
+
+- Tab closes an open Lightbox. The image zooms in place rather than in a
+  modal, so Tab used to move focus to the page behind the overlay.
+
+- The data table page's sort script compares numeric columns as numbers
+  and reads `data-value` first, so `$1,200.00` sorts after `$87.00`.
+
+- Forced colors (Windows contrast themes) paint every fill as Canvas, and a
+  few controls drew nothing else:
+  - Filled, tonal and elevated buttons, filled and tonal icon buttons,
+    keypad keys, the keyboard, the questionnaire's footer buttons, the bar
+    chart track and the search bar now get an outline.
+  - A pressed toggle takes the Highlight fill.
+  - The select caret and check, the submenu chevron and the bottom sheet
+    handle, all glyphs masked from a fill, paint in CanvasText.
+  - Slider stops come back, and the inactive track is CanvasText, so
+    GrayText now means only disabled.
+  - Disabled checkboxes, radios and their labels turn GrayText.
+  - FABs (`.extra`, `.extend`, `.large.circle`) and `.button` get the
+    outline too, the column chart track is outlined like the bar chart's,
+    the color picker area gets an edge, and every aura variant, rainbow and
+    glow included, is the solid Highlight ring its docs describe.
+- Blockquotes, table cells and the stacked `.responsive-table` header use
+  logical properties, so the quote bar, cell alignment and header border
+  mirror in a right-to-left page.
+- The lightbox opens above a non-modal bottom or side sheet. Its overlay and
+  zoomed image were at `z-index: 1000`, under the sheets' 1100; they now use
+  `--expressive-z-lightbox` (1200).
+- Swipeable tabs no longer jump back to the previous panel when you pick a
+  new one while the last scroll is still running. The track released its
+  target as soon as its position rounded to the new panel, so the rest of
+  the old scroll selected the panel it was heading to and fired `onShow`
+  for it. The target now holds until the track arrives.
+- Static chip close buttons work again after `AutoInit()`. The fallback
+  handler stepped aside for any `.chips` with an instance, and an instance
+  without `allowUserInput` never handled the click. Chips also copy their
+  initial `data`, ignore Enter during IME composition, and mirror arrow keys
+  in right-to-left text.
+- Menu clears its old highlight when it closes or moves, so reopening no
+  longer leaves two rows active. A `.menu-trigger` whose target id does not
+  resolve now warns and stays inert instead of inserting the text "null".
+  Menubar arrow keys skip disabled items.
+- A multi-select's checkbox stays checked when the box itself is clicked, and
+  a disabled option in a single select no longer closes the menu.
+- Autocomplete keeps the active row when a multi-select option is toggled and
+  doesn't search again. It returns focus to the field after a single-select
+  click, and takes Escape only when it closes the list, so an enclosing dialog
+  stays open. Results set before the field is focused don't open the list.
+  `destroy()` removes the combobox attributes it added.
+- Datepicker sorts multiple dates the same way in every browser, puts the tab
+  stop on today when nothing is selected, keeps focus on the year or month
+  select across a redraw, and no longer changes the caller's `minDate` and
+  `maxDate`. A typed date in multiple-selection mode joins the selection.
+  `destroy()` removes the date input's painted value.
+- Tabs find panels whose ids contain non-ASCII characters or sit in a shadow
+  root, and a shown panel keeps its CSS `display` instead of becoming
+  `block`.
+- Carousel leaves Alt, Ctrl, Meta and Shift shortcuts alone, as well as arrow
+  keys aimed at sliders, menus, tab lists and media controls inside a slide.
+- A snackbar swipe made within one millisecond no longer counts as a flick.
+- A textarea hidden at load (in a closed dialog or an inactive tab) gets its
+  height when it is first focused or typed in instead of staying 0px tall. A
+  `.file-field` without a path input no longer throws.
+- Tour skips steps whose target has been removed. A side sheet starts a drag
+  only from its own header. Escape during a sortable drag no longer closes
+  the dialog around the list.
+- Lightbox returns focus to the image when it closes and doesn't open an
+  image it can't measure. Particles uses the latest visibility entry,
+  repaints still dots after a theme change, and follows reduced motion as it
+  changes. MapView skips `data-lng-lat` values with an empty part and
+  handles cluster zooms and fullscreen requests that finish after
+  `destroy()`.
+- A keypad initialized before it is in the document works once inserted. The
+  slider's value label follows its host when the host resizes.
+- RichTextEditor logs invalid toolbar `data-attributes` JSON instead of
+  throwing. A required editor blocks submit while empty and takes focus,
+  where the hidden textarea used to block it with no message.
+- The character counter shows a prefilled value's count and invalid state
+  without waiting for focus. ExpandingCard calls `onClose` when its dialog is
+  closed natively. Card reveals and the app bar's search view work inside a
+  shadow root. ExpandingCard, AppBar, the FAB menu and CharacterCounter undo
+  their ARIA and tabindex changes on `destroy()`, and an `<a>` FAB trigger
+  without `href` is focusable.
+- A navigation rail `<button>` destination is now as tall as a link
+  destination instead of the default button's 40px.
+- A side panel destination that comes first in a navigation rail is laid out
+  as a destination, and `NavigationRail` no longer treats it as the menu
+  toggle.
+- The navigation rail side panel keeps its 12px padding. The global
+  `[popover]` reset in the menu styles had cleared it.
+- A modal or compact NavigationRail no longer collapses when blank space
+  inside it is tapped. Its scrim is the rail's own `::before`, so those taps
+  looked like scrim taps; only a tap beside the rail collapses it now.
+- Touch drags on a bottom sheet's `.drag-handle` and a side sheet's
+  `<header>` now dismiss the sheet. Without `touch-action` the browser took
+  the drag as a pan and cancelled the pointer, so the sheet snapped back. The
+  bottom sheet's built-in handle band and the side sheet's inner edge have no
+  element of their own to carry `touch-action`, so on touch screens the
+  explicit handle and the header are the drag areas.
+- A docked Datepicker for a date range now opens from its end input, and a
+  click on that input no longer closes it. The plugin counted the end input
+  as outside.
+- Menus listen for outside clicks on the document instead of `<body>`, so a
+  click below the content of a page shorter than the window closes them.
+- A MapView marker or popup whose `data-lng-lat` is not "longitude,latitude",
+  such as Google's latitude-first order, is skipped with a warning. MapLibre
+  threw on it after the map was created, which leaked the map and stopped
+  the rest of that `init()` call.
+- Restarting a running Tour releases the step it was showing, so only one
+  target carries the highlight.
+- Autocomplete results that arrive after the user left the field update the
+  list without opening it under the input.
+- A date typed into a Datepicker that the calendar would not offer, outside
+  `minDate`/`maxDate`, a disabled weekend or refused by `disableDayFn`, now
+  puts the input back to the selected date. A date before `minDate` used to
+  become `minDate` in the picker while the input, and the submitted form
+  value, kept the typed text.
+- A Datepicker input's initial value is now the selection, as it already was
+  once the input was clicked. `instance.date` was undefined until then, and a
+  multiple selection started empty.
+- A form reset now resets a Datepicker: the inputs added for extra dates in
+  multiple selection are removed, and the selection is read back from the
+  reset values. A refused date typed into one of those inputs restores that
+  input's own date. A Slider's fill and value label also follow a form reset.
+- Skipping a Questionnaire question clears its error. A skipped question
+  whose answer had been wrong still showed the error when the user went back.
+- A tooltip opened by hover still closes on Escape but no longer takes the key
+  from the focused control, so the same Escape also closes the dialog or menu
+  the user is in. On its own trigger, Escape stays the tooltip's.
+- A hover menu no longer moves focus into itself when the pointer passes its
+  trigger, which pulled focus out of the field being typed in. Space, Enter or
+  an arrow key on the trigger moves focus into the open menu, and Escape
+  closes it from wherever focus is.
+- Clicking inside an open Autocomplete input, for example to move the caret,
+  no longer closes its list. A trigger's own click is no longer treated as an
+  outside click by Menu.
+- Enter in a Timepicker hour or minute field writes the typed time, after an
+  emptied field takes its default as it would on leaving. With the
+  default `autoSubmit` there is no Ok button, so a keyboard user could type a
+  time but never set it.
+- Chips selection follows focus. Arrow keys used to move from the highlighted
+  chip while Backspace deleted the focused one, and the highlight stayed after
+  focus left the field.
+- Behaviors that listen on the document now work inside an open shadow root.
+  Copy, Theme, Dialogs light dismiss, bottom and side sheet dragging, the
+  bottom sheet handle button, ImageCompare, PaneResize, Sortable, Tour
+  controls, the password toggle, error summary links and drop zones read the
+  event's `composedPath()` instead of its target, which the document sees as
+  the shadow host. Sortable keeps focus on a moved item's button there, Theme
+  marks the controls in the clicked control's shadow root, and a sheet closed
+  there in the middle of a drag reopens without the drag offset.
+  Menubar moves between open menus, ScrollSpy marks links, and a card reveal
+  trigger named by `aria-labelledby` is accepted in a shadow root too. A
+  tooltip under a positioned shadow host now sits next to its trigger instead
+  of offset by the host's position. `change`, `submit`, `reset` and `toggle`
+  events do not leave a shadow root, so file lists, field validation, the
+  error summary and Tour's own toggle handling still need light DOM.
+- Focused read-only text fields now show the focus underline. The field's
+  focus styles skipped `[readonly]`, and FormSelect makes its combobox input
+  read-only, so a focused select had no visible focus indicator.
+- `@use "expressive" with ($md-source: …)` now sets the theme seed, as the
+  changelog for 0.13.0 and the migration skill describe. The variable moved
+  to `abstracts/_variables.scss`; before, Sass rejected the configuration
+  because the tokens layer is loaded with `meta.load-css()`.
+- The time picker's clock face is sized from `dialRadius`. It was a fixed
+  260px while the hand and numbers centred on the default 135px radius, so
+  the hand sat 5px off centre, further with a custom `dialRadius`.
+- Menus, context menus and select dropdowns open next to their trigger in
+  right-to-left pages. The menu kept the browser's `[popover]` `inset: 0`,
+  so with its explicit width the right edge won over `left`, and the menu
+  opened against the right side of its container.
+- Unlayered CSS can set a shadow on any component again. Thirteen component
+  rules that remove a shadow (text buttons, disabled buttons, docked
+  toolbars, filled and outlined cards, full-screen dialogs, separated panes,
+  the search view's bar) used `box-shadow: none !important`, and a layered
+  `!important` beats every unlayered rule. Only the `.z-depth-0` utility
+  keeps the flag. A focused disabled `a.button` with an `href` no longer
+  shows the enabled fill, a disabled FAB takes the disabled fill instead of
+  the primary container, and an `elevated` pane in a separated or floating
+  layout now shows its elevation. Disabled FAB menu items and toolbar FABs,
+  including `aria-disabled="true"` ones, paint as disabled and no longer lift
+  or tint on focus; `aria-disabled` ones still take hover, so a tooltip can
+  say why. `.hoverable` no longer lifts a disabled element.
+- A shadow root that adopts the sheet as its only stylesheet now inherits the
+  page defaults: `border-box` sizing, the body-medium type role and the
+  on-surface text color. These were set only on `html` and `body`, which a
+  shadow tree cannot reach, so its elements were `content-box` with the
+  browser's default text color.
+- With reduced motion requested, the floating label, switch handle, icon
+  button shape, slider value label, chips, time picker dial and the open card
+  reveal panel no longer animate.
+- A carousel that reaches the end of its track keeps the item you moved to.
+  Items past the end share that scroll position, and a one-pixel rounding
+  difference in WebKit could select a later one in a right-to-left carousel.
+- Selection and checked states stay visible with forced colors (Windows High
+  Contrast). Tabs, navigation bar and rail destinations, pagination, toolbar
+  actions, menu and list items, mega menu links and filter chips mark the
+  selected item with a Highlight outline. Checkboxes, radios and switches draw
+  their checked state in system colors and get an outline on keyboard focus.
+  The datepicker marks today, the selected day and the range. Small badges,
+  the loading indicator and carousel dots keep their shape. A keyboard-focused
+  tab also gets the focus ring instead of only a faint tint.
+- Right-to-left pages lay out text fields, checkboxes and more on the correct
+  side. The floating label, prefix and suffix icons, trailing icon button,
+  character counter and the select caret's inset follow the reading
+  direction, as do the checkbox mark, the date range band, the modal
+  navigation rail, the snackbar container and its padding, the dialog header
+  form, menu item text and the nested menu's entry slide, and the map popup's
+  close button. A field's label, icons and icon clearance follow the field's
+  `dir`, so an input with `dir="auto"` or its own `dir` keeps its text clear
+  of the icon. Fields and the character counter read `dir`; a page that sets
+  only the CSS `direction` property renders them left to right. Known issue:
+  the date picker's `isRTL` option reverses the cells in script, so the range
+  band points the wrong way with it on, and on an RTL page it turns the
+  calendar back to left to right. On an RTL page, leave `isRTL` off.
+- The modular entry now exports the option types of `CommandPalette`,
+  `Confetti`, `Particles`, `Keypad`, `MessageScroller`, `RichTextEditor` and
+  `MapView`, as it already did for the other components.
+- The docs now cover the styled native `<meter>` on the progress page, the
+  `onOpen` and `onClose` callbacks of cards and expanding cards, the
+  timepicker's `dialRadius`, `outerRadius`, `innerRadius` and `tickRadius`
+  options, `PaneResize.width()` and `PaneResize.setWidth()`,
+  `Copy.textFor()`, and the `.overline` helper.
+- A JavaScript tooltip whose trigger sits in a shadow root now starts hidden
+  and absolutely positioned. The tooltip goes into that shadow root, where
+  neither `body > .tooltip` nor `:not(body) > .tooltip` matched it, so it
+  showed in the page flow before it was ever opened. `:host > .tooltip` now
+  gets the same rule as `body > .tooltip`.
+- A tap on a menu item after scrolling the menu by touch closes the menu
+  again. The scroll flag was cleared only by a click, and a touch scroll
+  ends without one, so the next tap was ignored as part of the scroll.
+- Datepicker's previous and next month buttons have accessible names. The
+  `previousMonth` and `nextMonth` i18n strings were never read; they now label
+  the buttons and default to `'Previous month'` and `'Next month'`.
+- A drag that starts on a bottom sheet's `.drag-handle` now moves the sheet
+  wherever the handle sits. The drag check looked only for the pre-1.0
+  `.handle` class.
+
+### Removed
+
+- The version resolver's JSON output (`scripts/resolve-version.mjs` in the
+  skill and the MCP package) drops `declaredVersion`,
+  `skillContractVersion` and `matchingCommit`. The first two copied
+  `declaredRange` and `contractVersion`, which remain; `matchingCommit`
+  was always `null`. Read `declaredRange` and `contractVersion` instead.
+- Datepicker's undocumented `formats` property, the table of format
+  functions. The `format` option and its tokens are unchanged.
+- **Breaking (0.16.0).** Most names kept for markup written before 0.8.0 are
+  gone. Each one has a replacement that has been documented since 0.8.0;
+  see Migration below. A few stay: `.breadcrumb` and `.breadcrumb-wrapper`,
+  a bare `ul.pagination`, and checkbox `input + span`, which multiple Select
+  still emits.
+- **Breaking (0.16.0).** The remaining compatibility paths are gone too: the
+  `.range` and `.range-field` slider hosts, a switch whose `.switch` class
+  sits on a wrapper around the label, the `.extra` size on a common button,
+  radio `input + span` and switch `input + span` / `.lever` drawing, the
+  `li.tab` wrapper, a chip's `.active`, Carousel's `.flat` layout, `fullWidth`
+  option and `.carousel-fixed-item`, and the `background`, `on-background`,
+  `surface-variant` and `surface-tint` color roles with their `-light`/`-dark`
+  pairs and utility classes.
+- Selectors and code that never matched or never ran. The date and time
+  picker rules no longer carry hyphenated twins of their generated parts,
+  such as `.date-picker-container`; the script only ever emitted the
+  unhyphenated names. The root `.date-picker` and `.time-picker` classes
+  still start the components. Also gone: the `.tabbed` focus class, which
+  every rule already paired with `:focus-visible`; the `.halfway-fab`,
+  `.searchbar.has-sidebar` and `.prefix ~ .chips` offsets; the
+  picker footer rules for buttons the script never created; and the
+  normalize rules for `h1`, `b`, `strong`, `small` and `kbd`, which the
+  typography rules already override.
+- Datepicker's `startRange` and `endRange` options. Nothing set them, and the
+  `is-startrange`, `is-endrange` and `is-inrange` classes they produced had
+  no styles. Use `isDateRange` for range selection.
+
+### Changed
+
+- The `expressivecss` skill is version 0.12.0 and `expressivecss-review` is
+  version 0.1.1. A review now leaves the reviewed files unchanged and only
+  offers its fixes. `expressivecss-migration` ships at 0.1.0.
+
+- Chips' form-associated control moved to a shared core module, which the
+  cascader uses too. The control gained `checkValidity()` and
+  `reportValidity()`.
+
+- An open menu is a popover in the browser's top layer. This covers Menu,
+  Select, Autocomplete, the menubar, Chips suggestions and the date
+  picker's menus. A container that clips or scrolls no longer cuts a menu
+  off, a modal dialog or sheet no longer covers it, and it draws above
+  every `z-index`, so `--expressive-z-menu` now only orders the docked date
+  and time pickers. Menu no longer sets `position: relative` on the
+  nearest clipping ancestor. The menu's `popover` attribute is `manual`,
+  and Menu still handles outside clicks and Escape itself. A context menu
+  is kept inside the window rather than its scrolling container, and stays
+  where it opened when that container scrolls. A `coverTrigger: true`
+  menu, or a menu whose trigger sits under a transformed ancestor, is
+  placed by measurement and follows its trigger when the page or a
+  container scrolls. Firefox would anchor a top-layer menu to the
+  trigger's box before transforms, which puts it beside a floating toolbar
+  centred with `translateX(-50%)` instead of under its button. Migration:
+  tests that run Menu in jsdom need `showPopover` and `hidePopover` stubs,
+  and CSS or script that read an open menu's inline `display: block`
+  should use `menu[id]:popover-open` or the instance's `isOpen`.
+- An open Lightbox shows its overlay, image and caption as manual popovers
+  in the browser's top layer. The image still zooms from its thumbnail
+  and back, and Tab, Escape, a click and scrolling still close it; focus is
+  not trapped. Lightbox no longer sets `overflow: visible` on every
+  ancestor of the image while it is open, which let a scrolling container
+  lose its clipping. `--expressive-z-lightbox` no longer applies to it. The
+  image carries `popover="manual"` only while open. Migration: tests that
+  run Lightbox in jsdom need `showPopover` and `hidePopover` stubs.
+- The `.mx-*`, `.my-*`, `.px-*` and `.py-*` helpers set `margin-inline`,
+  `margin-block`, `padding-inline` and `padding-block`. Horizontal text
+  renders as before. In a vertical writing mode, `.mx-*` and `.px-*` now
+  space the top and bottom, following the text, and `.my-*` and `.py-*`
+  the left and right.
+- Menu, navigation bar and slider state layers read the
+  `--md-sys-state-*-state-layer-opacity` tokens instead of fixed 8% and
+  10% mixes. The defaults render the same. A page that overrides a state
+  token now changes these layers too.
+- Every component inherits one `Component.init`, and the base constructor
+  merges `defaults` with the options passed in. `init` types are
+  unchanged. The `CommandPalette` and `Questionnaire` constructors accept
+  any `HTMLElement`, which their `init` already took, and a subclass that
+  overrides `defaults` now gets its own defaults merged.
+- Every component inherits one `getInstance` from `Component`, which also
+  sets and clears the `el.Expressive_<Name>` property. The types are
+  unchanged, except that `Slider` and `CharacterCounter` accept any
+  `HTMLElement`. A subclass that overrides `getInstance` with its own return
+  type no longer compiles (TS2417); delete the override, because the inherited
+  one already returns the subclass.
+- The bundle uses `ResizeObserver` and `IntersectionObserver` without
+  checking that they exist. Every supported browser has both, but tests that
+  run components in jsdom need stubs for them, as they already need one for
+  `matchMedia`.
+- A click in a Select sets `selected` on the option clicked and leaves the
+  others alone. It used to write every option.
+- Data tables and line charts inside a shadow root sort and format numbers
+  in the host's `lang`, as the date and time pickers already do.
+- The MCP package ships `scripts/bounded-file.mjs` and
+  `scripts/semantics-rules.mjs`. Inspection read errors use new wording,
+  such as "inspected file exceeds N bytes".
+- A runtime tooltip that opens while a tooltip is closing, or within 300 ms
+  after that one's `exitDelay` ends, shows without waiting its
+  `enterDelay`, so moving along a toolbar shows each tooltip at once. Only
+  pages that set `enterDelay` above `0` see a difference. The first tooltip
+  still waits its delay, and a tooltip that stays open does not shorten the
+  others'. The window is fixed and has no option.
+- A Chips field whose text `<input>` has a `name` now submits its chips
+  under that name, one `id` each, instead of the text being typed. A page
+  that read the draft text from the form should read `chips.getData()`, or
+  take the `name` off the input to keep the old behavior. The input now sits
+  inside `<expressive-chips-control>`, so `.chips > input` selectors and
+  `input.parentElement` code need updating. The input's `validity`,
+  `validationMessage`, `:invalid` and `invalid` event no longer report the
+  required state; read them from the control or the form. `form.elements`
+  lists the control under the field's name. In a Questionnaire step, or on
+  a `.validate` input, an empty required chips field does not count as
+  invalid.
+- Datepicker and Timepicker follow the page's language. With a `lang` on
+  the input or around it, the calendar takes that language's month and
+  weekday names from `Intl` and its first day of the week where the browser
+  knows it, and the clock defaults to 12- or 24-hour as that language does.
+  Options the page passes still win, and the button words stay English
+  unless passed. A page with no `lang` is unchanged. To keep the English
+  calendar on a page with another `lang`, pass the English names in `i18n`.
+  A typed date in the picker's own `format` is now read with its names, so
+  the localized value it writes reads back, and `05/10/2026` in
+  `dd/mm/yyyy` is 5 October rather than what `Date.parse` guessed.
+- A full-screen `dialog.search-view` opens on a click, Enter or ArrowDown
+  in the app bar's search field, not on focus. Tabbing through the bar used
+  to open the modal each time, so every keyboard pass needed an Escape
+  (WCAG 3.2.1). A docked view still opens on focus. The bar shows the
+  shared focus ring while its field is focused, since its input clears its own.
+
+- Snackbars queue. A new snackbar waits until the one on screen is dismissed,
+  then shows, as Material asks, instead of replacing it at once. Migration:
+  pass `replace: true` where a snackbar should still take over immediately,
+  as copy buttons now do. A queued snackbar fires `expressive:open` and
+  captures focus when it appears, `dismissAll()` clears the queue too, and a
+  snackbar built from `snackbarId` has no `el` until it shows. A persistent
+  snackbar whose container a re-render removed no longer blocks the next.
+
+- Time picker hours step round the day: in 12-hour time, Up from 11 AM
+  gives 12 PM and Down from 12 PM gives 11 AM, so AM and PM follow the
+  hour.
+- Radar chart gaps: a missing value breaks the outline instead of joining
+  the spokes either side, as a line chart's does. With `.area`, each
+  unbroken run fills as a wedge from the middle, drawn by a new
+  `.radar-chart-area` path, and a value between two gaps is a dot.
+- A sheet drag that moves against the dismissing direction now counts as
+  a drag, so the click that ends it no longer activates a handle button.
+- The time picker's hour and minute fields are spin buttons
+  (`role="spinbutton"` with their range). Up and Down step them by one and
+  Page Up and Page Down by five, wrapping round the dial, and the clock hand
+  follows. Code that found them by the `textbox` role needs `spinbutton`.
+- The `Tooltip` plugin anchors its bubble with CSS anchor positioning where
+  the browser supports it: the tooltip stays beside its activator through
+  page and container scrolling and flips at the viewport edge. Anchored
+  tooltips fade in without sliding, and `transitionMovement` joins the gap.
+  Other browsers keep the measured position.
+- Menus opened from a trigger, including Select, Autocomplete, the menubar
+  and the date picker's menus, anchor with CSS anchor positioning where
+  supported: they follow the trigger through scrolling, flip at the viewport
+  edge and scroll when taller than the room on that side. Context menus and
+  `coverTrigger: true` keep the measured placement.
+- The tabs indicator moves on the default spatial spring
+  (`--md-comp-tabs-indicator-easing` and `-duration`), and now stops under
+  reduced motion. The `Tabs` `duration` option defaults to `null`; a number
+  keeps the old ease-out timing for that instance. Switch handles slide on
+  the fast spatial spring (`--md-comp-switch-motion` and `-motion-duration`),
+  and the chip set's border and shadow change on the fast effects spring.
+- Button groups and the keypad press on the fast spatial spring tokens
+  instead of the hand-sampled `$motion-fast-spatial` curve, through
+  `--md-comp-button-group-motion` and `--md-comp-keypad-motion` with new
+  `-motion-duration` pairs, so `motion="expressive"` reaches them. The press
+  settles in 182ms instead of a 200ms window. `$motion-fast-spatial` stays
+  for Sass that still names it.
+- Reduced motion now reaches every component through the tokens: under
+  `prefers-reduced-motion: reduce`, all `--md-sys-motion-duration-*` and
+  spring `-duration` tokens are `0s`. Lists, the data table, the navigation
+  bar, the mega menu, checkboxes, radios, pagination, tabs, the
+  questionnaire and the lightbox had no rule of their own and animated
+  before. No `!important`, so a page can opt an element back in.
+- Bottom and side sheets slide in and snap back on the default spatial
+  spring (`--md-comp-bottom-sheet-motion`, `--md-comp-side-sheet-motion` and
+  their `-motion-duration` tokens) instead of a 280ms ease, so
+  `motion="expressive"` applies to them. Each sheet now extends 24px past its
+  docked edge, with matching padding, so a spring's overshoot never uncovers
+  the page.
+- The navigation rail expands and collapses on the default spatial spring
+  (`--md-comp-nav-rail-motion` and `-motion-duration`). Its width, min-width
+  and padding no longer follow `--md-comp-nav-rail-duration`, which now
+  times only the indicator color.
+- FAB menu actions move on the fast spatial spring and fade on the fast
+  effects spring. `--md-comp-fab-menu-easing` and `-duration` now default to
+  the spatial spring, and the new `--md-comp-fab-menu-effects-easing` and
+  `-effects-duration` time the fade.
+- Basic dialogs now animate in: they fade on the fast effects spring and grow
+  from 96% on the default spatial spring (`--md-comp-basic-dialog-easing`,
+  `-duration`, `-effects-easing` and `-effects-duration`). They still close
+  at once. Sheets, `dialog.max` and the expanding card's dialog are
+  unchanged, and reduced motion opens without moving.
+- The expanding card morphs on the slow spatial spring:
+  `--md-comp-expanding-card-motion-duration` and `-motion-easing` now default
+  to it instead of 500ms on the standard curve. New `-content-duration`,
+  `-content-easing`, `-fade-duration` and `-fade-easing` tokens time the close
+  button and detail content. Close cleanup still follows the actual clip
+  transition.
+- Headings balance their lines and paragraphs avoid a one-word last line
+  (`text-wrap-style: balance` and `pretty`). The longhand leaves wrapping
+  itself alone, so `.truncate` and `.text-nowrap` still work.
+- A link without a class inside a `p`, `dd`, `blockquote`, `figcaption` or
+  `td` is underlined, so links in running text no longer rely on color alone
+  (WCAG 1.4.1). Links with a class, and links in lists, menus and navigation,
+  are unchanged.
+- The documentation's category rail opens each group's pages in a side
+  panel on hover or click, with each section as a dropdown. The section
+  holding the current page starts open. The panel replaces the page list that
+  sat beside the rail from Large up.
+- Snackbar's generated close button holds its icon in a
+  `<span class="material-symbols">` instead of an `<i>`. Styles that targeted
+  `.snackbar i` need `.snackbar .material-symbols`.
+- Swipeable tabs no longer use Carousel. The panels move into a full-width
+  `.tabs-content` scroll-snap track, so touch and trackpad swipes are native
+  scrolling. Only the shown panel is reachable by keyboard; the others are
+  `inert`. The track re-aligns when its width changes, so a tab bar started
+  in a closed dialog or sheet shows the current panel once opened. Dragging
+  the panels with a mouse no longer switches tabs; click the tab instead.
+- Components that read `surface-variant` now read
+  `surface-container-highest`, as Material 3 maps it: the unselected switch
+  track, the time picker's clock face and hour and minute inputs, the date
+  picker's header rule and focused month and year field, and disabled cards.
+  In dark mode those surfaces are a little darker and more neutral. Rules
+  that read `background` or `on-background` now read `surface` and
+  `on-surface`, which resolve to the same colors.
+
+### Migration
+
+- Sass: `@include z-depth("0")`, `btn-flat` and `btn-disabled` no longer emit
+  `box-shadow: none !important`. A stylesheet that relied on the flag to
+  cancel its own higher-specificity or inline shadow needs the flag itself.
+  The `.z-depth-0` class keeps it. Because the utility layer outranks those
+  resets, `.hoverable` on a text button now lifts it on hover, and a pressed
+  `.filled` or `.outlined` card with `.hoverable` keeps the hover shadow.
+
+- Icons: write `<span class="material-symbols" aria-hidden="true">`. A bare
+  `<i>` is no longer treated as an icon inside buttons, lists, menus, chips,
+  bars or fields, and `.material-icons` is gone; use `.material-symbols`
+  (or the `-outlined`, `-rounded` and `-sharp` variants).
+- Field icons: name the side with `.prefix` or `.suffix`. The positional
+  `i:first-of-type` / `i:last-of-type` fallback is gone.
+- Visibility helpers: replace `.hide-on-small-only` and
+  `.hide-on-small-and-down` with `.hide-on-compact-only`, `.hide-on-med-only`
+  with `.hide-on-medium-only`, `.hide-on-xxl-only` with
+  `.hide-on-extra-large-only`, `.show-on-small` with `.show-on-compact`, and
+  `.show-on-xxl` with `.show-on-extra-large`.
+- Replace `.no-padding` with `.p-0` and `.center-block` with `.mx-auto` plus a
+  `display: block` of your own. `.no-select` has no replacement class; set
+  `user-select: none` in your own CSS.
+- Progress: replace `.preloader` with `.progress.circular`.
+- Date and time pickers: AutoInit starts `.date-picker` and `.time-picker`
+  only. Rename `class="datepicker"` and `class="timepicker"` on the inputs.
+- Search: replace `.searchbar` with `.search-bar`.
+- Sheets: replace `dialog.bottom` with `dialog.bottom-sheet`, and the sheet's
+  `.handle` with `.drag-handle`. Replace side sheet `dialog.right` and
+  `dialog.right-sheet` with `dialog.side-sheet`, and `dialog.left` and
+  `dialog.left-sheet` with `dialog.side-sheet.start`.
+- Toolbar: replace host `.max` with `.docked` and host `.filled` with
+  `.vibrant`. A `.filled` action and a `.max` spacer inside the bar are
+  unchanged.
+- Tooltip: replace `.tooltip.max` with `.tooltip.rich`.
+- Menus: replace a bare `<hr>` between items with
+  `<li class="divider" role="separator">`.
+- File input: the trigger is a `<label class="button">` wrapping the
+  `<input type="file">`. A `<button>` or `.btn` trigger is no longer styled.
+- Script: replace `Expressive.Range` with `Expressive.Slider`.
+- Buttons: replace `class="button extra"` on a common button with
+  `class="button medium"`. Its label grows from `label-large` (14px) to
+  `title-medium` (16px). `circle extra` is still the FAB. A navigation
+  rail FAB is a plain `.button`.
+- Radios and switches: drop the `<span>` or `.lever` after the input; the
+  input draws the control and the label text sits beside it. Put `.switch`
+  on the `<label>` itself: `<div class="switch"><label>` now draws a
+  checkbox.
+- Sliders: replace a `.range` or `.range-field` host with `.slider`, or wrap
+  the input in a `<label>`.
+- Tabs: put the `<a>` links directly in `nav.tabs`, without `ul` and
+  `li.tab`.
+- Chips: replace `.active` with `.selected`.
+- Carousel: replace `.flat` or `fullWidth: true` with an M3 layout such as
+  `.hero` or `.uncontained`. A `.carousel-fixed-item` child is now an
+  ordinary item; position a fixed overlay in your own CSS.
+- Color: replace `--md-sys-color-background` with `surface`, `on-background`
+  with `on-surface`, `surface-variant` with `surface-container-highest` and
+  `surface-tint` with `primary`, in variables and in the `.x` / `.x-text`
+  utility classes. Overrides of the `-light`/`-dark` pairs move the same
+  way.
+
+## [0.15.0] - 2026-10-14
+
+### Added
+
+- The agent skill has a layout guide, `expressivecss-layout`. It covers
+  Material's layout principles, the five breakpoints with their grid
+  prefixes and Sass mixins, the canonical layout starting points,
+  right-to-left support, and where each Material layout term lives in
+  ExpressiveCSS. Its breakpoints reference lists the panes and components
+  for each breakpoint and walks through Material's five questions for the
+  next size: what to reveal, divide, resize, reposition or swap. Its
+  canonical layouts reference covers feed, list-detail and supporting pane
+  layouts, including list-detail behavior when the window crosses 840px and
+  a grid fallback for supporting content that must stack on narrow windows.
+  Its grids and spacing reference maps Material's 4, 8 and 12 column grids
+  onto the 12-track `.row`, rulers onto containers and pane margins, and
+  covers grouping, rhythm and opt-in density with 48px targets. The design
+  guide's scaffold reference now lists the recommended pane count for each
+  breakpoint, the 50% split-pane rule with a navigation rail, the
+  three-pane limit, drag-handle toggling and persistent resizing, and the
+  co-planar, floating and docked ways to show more than one pane.
+- The scroll area docs show `.scroll-area` on `<html>` for a themed page
+  scrollbar. A browser test covers page scrolling and theme colors.
+- `.keypad` and `.keyboard` are on-screen keys that type into the text
+  field named by `aria-controls`. A keypad is three columns of round keys for
+  PINs, codes and dial pads; a keyboard is rows of keys sized from a column
+  count, with an optional `.numbers` row of shorter digit keys that
+  `hidden` drops. Keys with a `value` type at the caret and fire `input`; `data-key`
+  keys handle Backspace, Enter and a one-shot Shift. Keys square their
+  corners on press, and a `wide` key spans two cells. A key inside the
+  field's `.field`, such as a trailing Backspace, works too. Browsers skip
+  `minlength` for scripted edits, so the docs give a minimum length as
+  `pattern`. `Keypad` is in `AutoInit()` and takes an `onKey` option.
+
+### Changed
+
+- The `expressivecss` skill is version 0.11.0. It adds the
+  `expressivecss-layout` guide and component guides for keypad and keyboard.
+
+### Fixed
+
+- Reference tables on the docs site scroll sideways inside their own box on
+  narrow windows. At 375px, 22 docs pages used to scroll the whole page
+  sideways, mostly because of tables with long token names and defaults.
+  Three pages still do, because their demos (the 12-column grid, the large
+  icon and the extra-large split button) are wider than a phone.
+
+- A snackbar dismissed by a swipe now slides off the side it was swiped
+  toward, starting from where the pointer let go. It used to jump to the
+  right at once, even after a swipe to the left, because the dismiss
+  transition replaced the transform transition before it could run.
+- Date picker days outside `minDate`/`maxDate`, weekends under
+  `disableWeekends`, days rejected by `disableDayFn`, and the adjacent-month
+  days from `showDaysInNextAndPreviousMonths` now use the M3 disabled text
+  color and ignore the pointer. The rule looked for the state class on the
+  day button, but the picker puts it on the cell, so these days looked
+  selectable.
+- A footer whose only child is a plain `<nav>` link column now gets the full
+  page footer styles. When the navigation bar arrived, only the first footer
+  rule was narrowed to a lone `.navigation-bar`. The grid, `.filled`, link
+  and legal bar rules still skipped any footer with a lone `<nav>`. Pane
+  footers use the same guard, so they keep their flex action row.
+- Map markers and the column, bar and mixed chart hover layers mix
+  `in oklab` like the rest of the framework. Each mix is with `transparent`,
+  so the rendered colors do not change.
+- The date picker's unused `.year-text` no longer sets `on-primary`, a
+  leftover from the removed primary header.
+- A `data-tooltip-id` that names no element now logs an error and shows the
+  `data-tooltip` text. A `.tabs` bar with no links logs an error, and
+  swipeable tabs whose links reach no panel act as normal tabs. Each of these
+  used to throw, which stopped `AutoInit()` before the components after it.
+- Reopening a date picker no longer re-reads a value it wrote itself. Without
+  a custom `parse`, `Date.parse` read a `dd/mm/yyyy` value of `05/10/2026` as
+  10 May and passed that to `onSelect`.
+- Space and Enter reach an autocomplete's text field while the list is
+  closed. The menu's trigger keys cancelled them, so a space typed after
+  Escape was lost and Enter could not submit the form. ArrowUp and ArrowDown
+  open the list with the current matches.
+- Autocomplete fires `change` and `onAutocomplete` only when the selection
+  changes, as documented, instead of after every search. `setMenuItems` no
+  longer replaces `options.data`, so the documented custom `onSearch` filter
+  keeps searching the full data set.
+- A chart cell such as `e5` or `1e400` is a gap. These passed the number
+  check but read as `NaN` or `Infinity`, so one such cell turned every point
+  in the chart into `NaN` and nothing was drawn.
+
 ## [0.14.1] - 2026-10-11
 
 ### Fixed
@@ -2253,7 +3839,9 @@ are no compatibility aliases.
 - `.tabs` nested in a header or app bar as a secondary row. `.tabs` is a
   standalone component; the `.tabs.transparent` app bar variant is gone with it.
 
-[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.14.1...HEAD
+[Unreleased]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.16.0...HEAD
+[0.16.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.15.0...v0.16.0
+[0.15.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.14.1...v0.15.0
 [0.14.1]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.14.0...v0.14.1
 [0.14.0]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.13.1...v0.14.0
 [0.13.1]: https://github.com/BaezFJ/ExpressiveCSS/compare/v0.13.0...v0.13.1