@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -4,6 +4,1026 @@ All notable changes to this project are documented here. The format is based on
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/).
 
+## [1.12.0] - 2026-11-13
+
+Everything in this release is additive except the visual changes under
+**Changed** (outline and glow buttons are see-through; `ExpandableText`'s link
+takes its text's size; a selected tab's label is held readable): an app that changes nothing gets the same exports and
+the same compiled stylesheet (apart from inert additions listed below).
+
+### Fixed
+- **A link can be an `openOnHover` popover's trigger.** A click on a trigger
+  whose popover a hover had opened was cancelled (`preventDefault`) to keep the
+  popover open, so a link trigger (`PopoverTrigger asChild` around an `<a>` or
+  a router link) did not navigate. The click now goes through, and the close
+  it would cause is ignored instead; the popover still stays open.
+- **A `Carousel`'s side arrows take the `labels` they are given.** With
+  `navigation="arrows"` and the default placement, `labels.previous` and
+  `labels.next` were ignored and the arrows always said "Previous slide" and
+  "Next slide"; only the overlay arrows read them. Without labels they still
+  say the English default.
+- **On mobile, the `Sidebar` closes after any tap on a nav row** or its
+  `endAction` (+) button. It used to close only when the tap landed on the
+  row's icon or label text; elsewhere in the row the link navigated but the
+  sidebar stayed open over the new page. Keyboard Enter on a focused link now
+  closes it too. Toggling a group header still leaves it open.
+- **A toast sits on an opaque surface, whatever its variant.** The soft
+  (default), outline, glow and gradient variants paint little or no background
+  of their own, so the page showed through a toast and its text was hard to
+  read. The toast is now the popover surface with the variant's tint, border
+  and text on it; solid toasts look as before.
+- **A tooltip whose words change says the new ones.** A toggle's tooltip
+  (`Button` `tooltip` "Maximize panel" → "Restore panel") kept saying its first
+  words: the tooltip passes its props on only when they differ, and leaves its
+  content out of that comparison because the content is a new element on every
+  render. Text content now rides as a compared prop of its own, so changed words
+  reach the tooltip; element content behaves as before.
+- **`KeyValueManager` no longer nests a `<tr>` inside a `<tr>`.** Its desktop
+  table wrapped each page of rows in an animated row, which made React log
+  "In HTML, `<tr>` cannot be a child of `<tr>`" and risked hydration errors.
+  The page slide now animates the table body, so each row is a single `<tr>`.
+  The slide, which had no visible effect on the table before, now plays when
+  paging; it does not play on first render. No API changes.
+- **A hover popover no longer opens after the pointer has left.** With
+  `openOnHover`, leaving the trigger before `openDelay` ran out still opened
+  it; the pending open is now cancelled.
+- **A hover hand-over in a `PopoverGroup` keeps the new popover open.** The
+  popover being replaced returned focus to its own trigger as it closed; that
+  focus landed outside the new panel and closed it as well, leaving nothing
+  open. A close caused by a hover never moves focus now. Likewise a click
+  from one popover's trigger to another's opens the second: the first one's
+  own close no longer closes whichever popover is open, and a popover the
+  group closes because another took its place never sends focus back to its
+  trigger (that focus closed the new one).
+
+### Changed
+- **A selected tab's label is held readable.** In the pill variants it sat
+  on a 10% tint of its own colour, which took the default blue to 4:1 on a
+  light page, under the 4.5:1 small text needs. The label keeps its hue and
+  chroma but its lightness is capped at L 40 on a light page and floored at
+  L 62 on a dark one (relative colour syntax; older browsers keep the colour
+  as given). The default blue becomes a slightly deeper blue (5:1), and so
+  does `line`'s; colours already in range, and `solid`, are unchanged.
+- **`ExpandableText`'s "Show more" link takes its text's size.** It had a fixed
+  `text-sm`, so under smaller text (`className="text-xs"`) the link outweighed
+  what it expands. It now sets no size of its own: under `text-sm` text, the
+  common case, it looks exactly as before. Weight and colour are unchanged.
+- **Outline and glow buttons are see-through.** The base `outline` and `glow`
+  variants (`/core`'s `buttonVariants`, so the styled `Button`, `CopyButton`,
+  `Pagination`, `DateRangePicker`… too) fill with `bg-transparent` instead of
+  `bg-background`. On the page background nothing changes; on a card, a band
+  or a tinted panel the button now shows that surface instead of a
+  page-coloured patch. A button drawn over a picture gives itself a surface,
+  as `Carousel`'s overlay arrows (`bg-card`) and `Coverflow`'s (`bg-background`)
+  already do — pass the same class to keep the old look anywhere it matters.
+
+### Added
+- **`Toolbar` and `ToolbarButton`** — a 44px bar of small controls across
+  the top of a work area, with `start`, `center` and `end` slots: the two
+  sides share the width, so the centre stays centred on the bar whatever the
+  sides hold. Left/Right arrows move between its controls and Home/End jump
+  to the ends, as the `toolbar` role promises; `tone="dark"` keeps it dark in
+  either theme. `ToolbarButton` is its 28px icon-only button: the `label` is
+  the accessible name and the tooltip, `pressed` makes it a toggle, and a
+  `count` or an `attention` dot can sit over the icon. Quiet (ghost) unless
+  `color="primary"`.
+- **`AnchoredPanel`** — a small non-modal panel attached to a point by a
+  short leader line (`anchorRef`, opening on `side` left or right), for
+  editing the thing it sits beside rather than in a far corner. A plain
+  `title`, an optional monospace `subtitle` and `badge` in its header, ✕ to
+  close. Focus moves into it on opening; Escape, ✕ or a press outside closes
+  it, except a press `keepOpenFor` accepts (the control that toggles it).
+- **`FloatingWindow`** — a small window floating over the page, moved by its
+  bar: a non-modal dialog, so the page behind it stays live. The bar carries
+  Minimize (folds it to a pill in the bottom-left corner; `attention` puts a
+  dot on the pill and says why), Dock (also Escape) and Close. The page keeps
+  the `position`; the window hands back the new spot, kept inside the
+  viewport, once a drag ends. Wrap `onMinimize` / `onRestore` in
+  `startViewTransition` and the window morphs into its pill and back.
+- **`NoticeStrip`** — one line of news across the top of a canvas, the full
+  width of its container, in the glow of its `tone` (`info`, `warning`,
+  `error`) on an opaque base, with its words and `actions` centred and an
+  optional ✕ at the far end (`onDismiss`, `dismissLabel`). An error is an
+  `alert`, anything else a `status`. Built on `Alert`.
+- **`Readout`** — an instrument's display: values in monospace on a dark
+  plate, each with its unit in a dimmer ink (`segments`), the same in both
+  themes. `state` marks it `selected`, `error` (the values turn red) or
+  `stale`; `labelled` draws each value's label before it. With `onClick` it
+  is a toggle button, pressed while `selected`.
+- **`ChoiceCard`** — a card you click to choose something (a board, a
+  framework), where a media card is one you click to open. The whole card is
+  one toggle button: its picture edge to edge on a mist that clears into the
+  card, the title and meta lines under it, a ring and a tick when `selected`,
+  greyed with its reason as the `note` when `disabled`. `layout="row"` puts
+  a small picture on the left, for a list of several chosen at once.
+- **`ShowcaseCard`** — a catalogue card on `MediaCard`: a picture with an
+  actions strip that slides up over it (`reveal`), the name, a meta row and
+  a footer row. The title opens what `open` says: a page (`href`), a page of
+  the app through the router's own link (`link`), or an action (`onOpen` with
+  a `label`); without it the title is plain text. Cards glide to their new
+  places in a view transition.
+- **`SortMenu`** — a one-of picker: the current choice as an outline button's
+  label (named "Sort makers: Newest"), the choices as radio items in a menu.
+  A sort by default; with another `icon`, any filter of the same shape.
+  `iconOnlyBelow` shrinks it to its icons on a narrow row; `align` picks the
+  edge the menu lines up with.
+- **Facet filters: `FiltersPanel`, `FilterGroup`, `FiltersPill` and
+  `ActiveFilters`**, a filters side panel for a catalogue page, props only:
+  the page hands in its groups already counted and labelled
+  (`FacetFilterGroup`), what is ticked (`FacetSelection`) and every string
+  (`FacetFiltersLabels`). Each group shows three options, five more per
+  "Show more", every ticked option always, and has a search of its own. The
+  panel folds into a floating `FiltersPill` and back — one view-transition
+  name, so the panel morphs into the pill — with `useFiltersCollapsed`
+  holding the state and `supportsViewTransitions` telling the page when to
+  play the CSS entrance instead. `ActiveFilters` lists what narrows the
+  results, each removable, and "Clear all".
+- **`InputGroup`, `InputGroupTextarea` and `InputGroupAddon`** — a field and
+  the controls that belong to it in one bordered box that takes the focus
+  ring when anything inside has focus (shadcn's Input Group on the library's
+  tokens). `elevation` is `raised` (default), `float` (a halo on every side,
+  for a box floating at the bottom of a window) or `flat`. The text area is
+  borderless and grows with its content (`field-sizing: content`) between
+  its min and max height; the addon is a row of controls under it.
+- **`Bubble`** — one turn's text in a conversation: `variant="filled"` puts
+  the person's own words in a soft tinted box, `plain` (default) leaves the
+  other side as text on the page. `size="sm"` for a conversation in a column
+  beside other things.
+- **`Reveal`** — one part of a section's entrance: it rises into place and
+  fades in when `revealed` turns true, a beat later per `order` (0–3), with
+  `grow` settling from slightly small. Under reduced motion it is simply
+  there.
+- **`CheckBadge`** — a small filled success circle with a tick, drawn inside
+  an `<svg>` at `cx`, `cy` with radius `r` in scene units.
+- **`MessageScroller`** — a conversation's scrolling area: it follows new
+  messages while the reader is at the end, stops when they scroll up to
+  read, and offers a round "jump to latest" button (`jumpLabel`) until they
+  are back. A `log` for assistive technology, so new messages are announced
+  politely; `paused` holds it still; the jump is instant under reduced
+  motion. Scrolls in `ScrollArea`, its thumb shown only while the pointer is
+  over the thread.
+- **Resizable panels: `ResizableGroup`, `ResizablePanel` and
+  `ResizableSeparator`**, a row or column of panels the person resizes by
+  dragging, or with the keyboard, the separators between them. The group
+  takes a remembered `defaultLayout` and reports `onLayoutChanged` once a
+  change settles; a panel can be `collapsible` and is driven from outside
+  through `panelRef` (`ResizablePanelHandle`); the separator is a hairline
+  lit in the primary colour while pointed at, held or focused. **New
+  dependency:** `react-resizable-panels` (^4.14.1, MIT), reached only by
+  these components and `ColumnPanel`.
+- **`ColumnPanel` and `usePanelFlag`** — a `ResizablePanel` that is shown and
+  hidden by an `open` flag (a chat, a details column), collapsing to nothing
+  and reopening at `openSize`; `size` moves it from a button (a maximize).
+  Hidden, it stays mounted but leaves the accessibility tree and the tab
+  order. `usePanelFlag` is the hook behind it, for any collapsible panel; it
+  waits instead of throwing when asked before the group has measured the
+  panel.
+- **`Coverflow` says what opening the front card does.** `openCursor`:
+  `zoom-in` (the default, as before) for a picture opened larger, `pointer`
+  for a card that leads somewhere, such as a project's own page — the zoom
+  cursor there promised a bigger picture and got a page.
+- **`Accordion` can be controlled.** `value` (the open item's id, `''` for
+  none; the open ids with `allowMultiple`) with `onValueChange` lets the page
+  keep the state — for an accordion that is also opened and closed from
+  elsewhere, such as a parts list whose row opens when the part is clicked on a
+  drawing. Without `value` it keeps its own state from `defaultValue`, as
+  before. `itemClassName` goes on every item, so `data-[state=open]:…` can
+  style the open row.
+- **`FeatureGrid`** — what something does, as a numbered grid: a short title
+  per item and an optional sentence under it, two columns where there is room
+  (`columns` 1–3, by the grid's own width), each item drawing its own
+  dividers so an odd count leaves an empty cell rather than a grey block. A
+  long list shows its first `pageSize` items (default 6); the button under it
+  shows the rest at once (`reveal="all"`, "Show all 15") or the next page at a
+  time (`reveal="page"`, "Show 6 more"), moves focus to the first item it adds,
+  and folds back ("Show fewer") once everything shows. `numbered={false}` drops
+  the numbers; `titleAs` picks the title element; labels are props.
+- **`navigationPlacement="beside"` on `Carousel`**: the side arrows sit in
+  gutters of their own to the left and right of the slides, and the slides are
+  kept clear of them — for a row of cards or chips, where the default arrows
+  (drawn over the slides' edges) cover the first and last card. Dots and custom
+  controls still go below. `'below'` and `'overlay'` are unchanged.
+- **`scrollable` on `FullscreenDialog`** (default `true`, as before). With
+  `false` the body is exactly the height left under the heading and does not
+  scroll, so its content can fill it (`h-full`): a picture shown whole, a
+  canvas, a player. Inside the scroll area a picture had no height to fit to
+  and ran past the screen.
+- **`ToggleGroup variant="solid"`**: the selected item is a pill filled with
+  the group's `color`, its text in that colour's `-foreground` (black or white
+  by lightness for any other CSS colour), on a quiet hairline frame — the same
+  recipe as `TabsList variant="solid"`, so the two sit together. A pressed
+  item of a `multiple` group is filled itself. Mist's fill is nearly the
+  surface it sits on, so a solid mist pill keeps its `mist-border` hairline.
+  The other variants are unchanged. (`contrastingForeground`, the text-on-any-
+  fill rule `TabsList` already used, moved into the shared colour utility so
+  both read one copy.)
+- **`MediaStage`** — a fixed-proportion frame (4:3 by default, 16:9 or 1:1)
+  for one picture: a product photo, a video poster, a wiring diagram. Its
+  height comes from its width alone, so a gallery never jumps between pictures
+  of different shapes and a column beside it never stretches it. A photo is
+  shown whole over a blurred, darkened copy of itself (the copy is hidden from
+  assistive technology); `variant="diagram"` puts the picture on the dotted
+  canvas surface instead. Arrows, captions or a video player go in as
+  `children`, drawn on top.
+- **`ThumbnailStrip`** — the row of thumbnails under a gallery: one button per
+  picture, the one on show pressed and scrolled into view within the row
+  (never the page). When the row runs past an edge, that side shows an arrow
+  over a fade into the strip's surface; a hidden arrow is out of the tab order.
+  `size="sm"` for a phone; labels are props, English by default.
+- **`HorizontalStepper` steps can carry a `description`**, and the stepper takes
+  `align="start"` (nodes and text on the left of each column, the line running
+  out to the right) and `semantics="list"` (read as an ordered list with the
+  `in_progress` step marked `aria-current="step"`, for when the steps are the
+  instructions rather than a status picture). Defaults draw and read exactly
+  as before.
+- **`lines` on `TruncatedLineWithTooltip`** (1–6, default 1): past one line
+  the text is clamped to that many lines (a card's description) and measured
+  by its height, so the whole text is offered on hover only when the lines
+  cut it. One line behaves as before.
+- **`ViewToggle`** switches a collection between cards in a grid and rows
+  in a list: two icon toggles on a `ToggleGroup`, the current one pressed, and
+  one always on (pressing it again does nothing). Labels are props, English by
+  default (`Layout`, `Grid view`, `List view`).
+- **`gapped` on a segmented `ProgressBar`.** Each segment is drawn as its own
+  rounded piece with a small gap between them, on no track, instead of one bar
+  cut into colours (default `false`, so nothing changes unless it is set).
+- **`avatarColor` on the account menus.** `MyAccountMenu`, the `ProfileCard`
+  it shows, and the layouts' `headerConfig` take the avatar's fill behind the
+  initial (default `primary`, so nothing changes unless it is set).
+- **`OptionCardGroup`: a choice between a few compact cards.** For a choice
+  that needs an icon and a sentence per option (how much to share, which plan,
+  which way to start): cards side by side, wrapping one under the other on a
+  narrow screen, each with an optional `media` icon on a small tile beside its
+  `title` (also the radio's name), a `description` and `tags` drawn as small
+  `StatusBadge`s. A native radio group, so the arrow keys move the choice; the
+  chosen card carries a primary ring, and a tag marked `emphasis` ("+ Source",
+  what this choice adds) turns primary only while its card is chosen.
+- **`FileUpload` `layout="row"`.** The icon, the lines and the browse control
+  on one compact line, for a drop zone inside a form or a card where the tall,
+  centred `stacked` default (unchanged) would dominate.
+- **`Code` numbers, marks and links lines.** `lineNumbers` puts a gutter
+  beside the code (a CSS counter, so the numbers are never selected or
+  copied); `highlightLines` tints whole lines (a search hit, a linked line);
+  `lineIdPrefix` gives each line an `id` (`L` → `#L42`) a page can scroll to
+  or link. `maxHighlightLength` (default `200000` characters) shows a very
+  large file as plain text, keeping its numbers, marks and ids. Lines are now
+  full-width blocks, so a mark spans the row. Additive: without the new props
+  nothing changes but the line boxes' width.
+- **`Code` shows something beside a line.** `lineMarks` (`{ [line]: node }`)
+  draws a small node at a line's left edge, in the padding before the numbers,
+  scrolling with the line: a pin a line drives, a breakpoint, a finding. It may
+  be interactive (an icon button with a tooltip) and comes after the code in
+  the reading order, never in the code's text. The code now scrolls in a
+  wrapper (`data-slot="code-scroll"`) that holds the code and its marks; it
+  looks the same.
+- **`cmake` and `ini` in the curated Shiki bundle** (`properties` is an alias
+  of `ini`), for `CMakeLists.txt` and `KEY=value` files such as ESP-IDF's
+  `sdkconfig.defaults`.
+- **`bg-recessed` and `shadow-recessed`,** the floor and walls of something
+  sunk into the surface around it (StepTabs' tray): `--color-recessed` (a
+  translucent darkening, deeper in dark mode, where a lighter veil reads as
+  raised) and `--shadow-recessed` (an inner shadow under the top edge, a
+  softer one inside it, a faint rim, and a light lip along the bottom edge),
+  whose per-theme value is `--espd-shadow-recessed`.
+- **`bg-canvas`, `canvas-dot` and `canvas-rim`,** a work surface things are
+  placed on and dragged around (a wiring diagram, a whiteboard): `--color-canvas`
+  a step off the page (lifted in dark mode, never near-black, because much
+  hardware artwork is dark grey), `--color-canvas-dot` for its grid, and
+  `--color-canvas-rim` to outline artwork drawn in its own colours (light in
+  dark mode, dark in light mode).
+- **Wire colours: `wire-power`, `wire-ground` and `wire-1` … `wire-8`,** for
+  connections drawn on the canvas (a wiring diagram). Each is at least 3:1
+  against the canvas in its own theme (darker in light mode, lighter in dark),
+  which the chart palette is not: it does not change with the theme, and two
+  of its colours fall to 2.5:1 on a dark canvas.
+- **`TabsList` `size`, `color` and a `solid` variant.** `size="sm"` is a 28px
+  strip (24px triggers, small text) for a toolbar; `size="lg"` has 36px
+  triggers, base text and 20px icons. `color` (default `primary`, any preset
+  or CSS colour) tints every variant from one `--espd-tabs-color` variable:
+  the pill's wash, the list's border, the glow's halo, the underline and the
+  selected label. `variant="solid"` fills the selected tab in that colour,
+  its text in the preset's `-foreground` token or, for any other colour,
+  black or white by the fill's lightness. A list that sets none of them looks
+  as before.
+- **`StepTabs`**: a one-row strip of a product's steps that is both navigation
+  and progress. Each step is a tab the person can go to, and carries its
+  `status` (the steppers' four, `stale` included) as a mark before its word:
+  a check when done, a dot in progress that throbs with a soft halo
+  (`animate-throb` and `animate-throb-ring`, new tokens; still under reduced
+  motion), a warning triangle when out of date,
+  nothing when not started (the word alone, centred). The status is read after
+  the word ("Firmware, Done"; `statusLabels` translates it) and is never
+  filled in from the order. Controlled (`value` / `onValueChange`, called for
+  the step on show too) and without panels, so the caller routes. One tab
+  stop; ←/→ (wrapping), Home and End move focus, Enter or Space chooses; a
+  `disabled` step is reached but not chosen. A step's `description` (text or
+  non-interactive React content: why it is out of date, when it was built,
+  why it cannot be chosen yet) shows in a tooltip on hover and keyboard
+  focus and is read as the tab's description; nothing focusable goes in it. `variant` `rounded` (a tinted
+  pill edged with a hairline a shade stronger than its wash, no outline round
+  the group; `tray` sits the steps in a capsule recessed into the bar — a
+  translucent floor with inner shadows for walls and a light lip below, no
+  line of its own — so they read as one control and the pill keeps its hue
+  on it) or `line` (an underline; `rule` draws the
+  strip's own bottom border), `size` `sm` (a 28px toolbar), `default` or
+  `lg` (40px steps, base text), and `color`
+  tints the pill, the word on show and the marks; the marks, the out-of-date
+  triangle included, are held at 3:1 against the page the same way the label
+  is. Built on `Tabs`, whose API is unchanged.
+- **A `failed` step status** (`VerticalStepperStepStatus`, so `VerticalStepper`,
+  `HorizontalStepper` and `StepTabs` alike): a step that ran and did not
+  succeed — a check that found a problem, a build that broke. It counts as
+  reached, like `stale`, and is drawn in `error` the way `stale` is drawn in
+  `warning`: `VerticalStepper` tints its node and ends the row with a cross,
+  `HorizontalStepper` fills its node, `StepTabs` marks it with a cross; each
+  reads it as "failed" (`StepTabs`' word is overridable through
+  `statusLabels`). Code that switches over the status exhaustively must handle
+  the new value.
+- **A `stale` step status** (`VerticalStepperStepStatus`, so `VerticalStepper`
+  and `HorizontalStepper` alike): a step that was done but whose input has
+  changed since, so it needs doing again. It counts as reached (the line into
+  it is filled). `HorizontalStepper` fills its node in `warning` whatever the
+  `color`; `VerticalStepper` tints its node in `warning`, ends the row with a
+  warning triangle instead of the check, and reads it as "out of date".
+  Code that switches over the status exhaustively must handle the new value.
+- **`RequirementListItem.description`**: an optional second line under a
+  row's label, one size smaller and muted in both states (only the label
+  takes the met colour), for a checklist whose labels need an example to act
+  on. A row with one aligns to the top with its icon on the label's line;
+  rows without one are unchanged.
+- **`PopoverGroup`**: popovers that share one place on screen. At most one is
+  open; with `openOnHover` the first opens after its `openDelay`, another takes
+  over only after the pointer rests on it for `switchDelay` (default 350 ms),
+  and reaching the open content cancels a pending switch, so crossing other
+  triggers on the way to the panel does not switch it. `value` /
+  `defaultValue` / `onValueChange` name the open one; `Popover` gains `value`,
+  its key in the group. A popover outside a group is unchanged.
+- **`FlipCard`**: two faces, controlled by `flipped`. `effect="turn"` (the
+  default) turns it over about `x` (a split-flap) or `y` (a page);
+  `effect="slide"` slides the showing face out past the far edge while the next
+  follows it in from the near one (down for `x`, sideways for `y`). Every
+  change moves the same way, so loading the hidden face and flipping shows a
+  stream of items in one slot; the hidden face is `aria-hidden` and `inert`;
+  `onFlipEnd` reports the end of a change (at once under reduced motion, where
+  the faces swap in place).
+- **`AsyncMultiSelect` `action`**: a row pinned under the scrolling options,
+  after a separator (`{ label, description?, icon?, onSelect }`), for a way out
+  of the search such as "Browse all". It stays in sight while the options
+  scroll, is reachable with the arrow keys, and shows also when nothing
+  matches (the empty text above it). Choosing it closes the dropdown and calls
+  `onSelect`; it selects nothing. New type `AsyncMultiSelectAction`.
+- **`shadow-float`** (`--shadow-float`): a wide, soft halo with no offset, for
+  something that floats over the page on every side, such as a composer docked
+  at the bottom of a window, where the `shadow-*` sizes (cast downward) would be
+  hidden. Coloured like `shadow-glow`, by the shadow-colour utility beside it
+  (`shadow-float shadow-foreground/10`); `cn` treats it as a shadow size.
+- **`SelectableCardList` `cardSelectionStyle`** (`border` | `tint` | `none`):
+  how a selected row shows it. `border`, the default, is the primary border as
+  before. `tint` is a very subtle primary background with the border in that
+  same tint, for lists where a heavy border is too much. `none` changes nothing
+  (the indicator still shows the selection).
+- **`SelectableCardList` item `note`, and `icon` is optional.** A `note` is a
+  line under the secondary text that is never truncated, for why a row is
+  suggested or why it is disabled (primary colour; muted on a disabled row).
+  An item without an `icon` draws no avatar and starts with its text.
+  Existing lists are unchanged.
+- **`Input` `startAddOnAction` / `endAddOnAction`**: a control (a button) that
+  is the add-on itself. It fills the segment edge to edge at the field's
+  height, takes the field's outer corners and none where it meets the text,
+  and its focus ring sits exactly on the segment's edges. It never shrinks:
+  the text part gives up the room. Takes precedence over
+  `…AddOnContent` and `…AddOn` on its side; text add-ons keep their padded box.
+- **`Tooltip` `maxWidth`** (`xs` | `sm` | `md`): caps the bubble's width so a
+  long tooltip (a sentence or two) wraps instead of running off the screen.
+  Unset, the bubble fits its content as before.
+- **`scrollbar-hover`** utility: a thin scrollbar that shows only while the
+  pointer is over the scroller or focus is inside it, for a row that runs past
+  the edge (filter chips). The thumb fades in and out (Chromium, Firefox;
+  Safari shows it at once). The track keeps its space, so nothing shifts on
+  hover. Beside `scrollbar-none`; the stylesheet only grows by its rules.
+- **`--espd-navbar-backdrop-blur`**: blurs the page under an open `NavBar`
+  details panel, behind its dim. Unset (`initial`) by default; it then
+  follows `--espd-overlay-blur`, and with neither set the page stays sharp,
+  as before. An app that already sets `--espd-overlay-blur` therefore gets
+  the same blur under the nav panel; set this token to `0px` to opt out. The
+  stylesheet only grows: the token declaration and its reader.
+- **`--espd-elevation-navbar`**: the shadow of `NavBar`'s floating pill
+  (`morphOnScroll`, scrolled) and of the details panel hanging from any
+  `NavBar`. Unset (`initial`) by default, so both fall back to
+  `--espd-elevation-overlay` and then to the bar's own `shadow-lg`, as
+  before. A dark theme, where a black shadow vanishes into a near-black
+  page, can give the bar a glow of its own without changing every overlay,
+  e.g. `.dark { --espd-elevation-navbar: 0 0 0 1px rgb(255 255 255 / 0.08),
+  0 0 32px -6px var(--color-primary); }`. The pill now keeps its shadow
+  while its panel is open, clipped at its bottom edge, so pill and panel
+  cast one shadow as one card. The stylesheet only grows: the token
+  declaration, the shadow reader, a box-shadow transition and the pill's
+  clip; `shadow-lg` stays generated.
+- **`CategoryCard`**: one category of a collection as a card that opens or
+  filters it, for a "browse by kind" row. Its icon on a tile in `color` (a
+  preset or any CSS colour, through the same `soft` resolution as `Badge`;
+  `iconClassName` for a token tint such as `bg-swatch-2-light text-swatch-2`
+  in its place),
+  the count in the corner (`value`), the name, a line (`description`) and a few
+  examples (`tags`, folding past `maxTags` into "+N"). The whole card is a
+  button, or a link with `href`; `selected` gives an accent border and
+  `aria-pressed` (or `aria-current` on a link) for cards used as a filter. It
+  is a size container: below 12rem wide it tightens and drops the tags, so a
+  two-up phone grid needs nothing from the app. The title truncates with a
+  tooltip (`truncateTitle`), the description clamps to two lines
+  (`truncateDescription`). Prop names follow `SimpleClickableCard`.
+- **`TruncatedLineWithTooltip` is public** (`/components`): one line that
+  truncates and shows the whole text in a tooltip only when it is cut. It
+  brings its own `TooltipProvider` when the app has none (it used to throw),
+  as `SectionCard`'s copy already did; `className` is optional.
+- **`MiniBarChart`.** A row of bars with no axes and no tooltip, sized to
+  sit inside a card: `values`, an sr-only `label` (required — the bars are
+  hidden from assistive technology), `highlightIndex` (the others fade),
+  `color` (any `Color`, or `currentColor` to follow the text on a filled
+  tile), `density` (`default` | `thin` for dozens of bars) and `height`
+  (default 32). The tallest value fills the height; a zero draws as a faint
+  stub rather than nothing. `barTooltip(value, index)` gives each bar a tooltip on
+  hover (return `null` for none): every bar then takes the chart's full
+  height as its hover target and brightens while hovered, and one provider
+  per chart swaps the tooltip at once from bar to bar. A visual extra —
+  `label` stays what assistive technology reads.
+- **`ShareMenu`.** Share a link from a `DropdownMenu`: copy it (the item
+  says "Link copied" for 1.4s, then the menu closes), the device's share
+  sheet (`native`, offered only where `navigator.share` exists), or a site's
+  own share page in a new tab — X, Reddit, LinkedIn, Telegram — or an email.
+  `url`, `title`, `text?`, `targets?` (order and subset), `labels?` and
+  `icons?` per target (English and the library's monochrome marks by
+  default), `trigger` (your button), `align`, `onShare(target)` for
+  analytics and `onCopyError`.
+- **`Timeline`.** A short feed, newest first: a dot per item on a
+  connecting line, the title, and when under it in the mono face. Pages by
+  `pageSize` (default 5); "Show N more" reveals the next page, which rises
+  in, and moves focus to its first item. `items` (`id`, `title`, `time?`,
+  `color?`), `labels.showMore(count)`.
+- **`StatCard`: `caption`, `visual` and `surface`.** `visual` is a
+  fixed-height row between the value and the caption for a small picture (a
+  `MiniBarChart`, a `ProgressBar`), so a row of cards stays level with or
+  without one. `caption` is one trimmed line under it; a string caption is
+  also its `title`. `surface="plain"` draws the card surface with a border
+  instead of the colour's gradient (`tinted`, the default), so a row of
+  differently coloured tiles reads as one set.
+- **`ProgressBar` segments take a `tooltip`.** Shown on hover over that
+  segment; one provider per bar swaps it at once from segment to segment. A
+  bar with no segment tooltip renders exactly as before.
+- **`CircularProgress`: `children`.** Content centred inside the ring — an
+  icon or an `IconAvatar` for a badge medal — drawn in place of the
+  percentage.
+- **Scrim tokens for modal overlays**: `--espd-overlay-scrim` (the colour
+  behind a modal `Sheet` or `Dialog`, `/core`'s `Dialog` and `CommandDialog`
+  included) and `--espd-overlay-blur` (how much it blurs the page under it).
+  Unset (`initial`) by default, so every scrim keeps its own: black at 50%
+  (Sheet, Dialog) or 80% (`/core`'s Dialog), no blur. A dark theme, whose
+  page is already near-black, can deepen or blur it on `:root` or `.dark`:
+  `--espd-overlay-scrim: rgb(0 0 0 / 0.6); --espd-overlay-blur: 6px;`.
+  The stylesheet only grows: the two token reads, the declarations, and
+  `bg-black/50` / `bg-black/80` kept for apps that use them.
+- **`Button` `color="silver"`**: the brand's metallic finish, which `Badge`
+  and `Tag` already take. `default` gets the brushed-metal sheen of a solid
+  silver badge over the `gray` fill, `outline` and `glow` the metallic 1px
+  ring in place of a border, `ghost` and `link` plain `gray`.
+- **`SearchBox` names its input**: `id`, `name`, `aria-label`,
+  `aria-labelledby` and `aria-describedby` go to the `<input>`, not the
+  wrapper. A search box usually has no visible label and a placeholder is not
+  an accessible name everywhere, so pass `aria-label` (or point
+  `aria-labelledby` at a heading, or `id` at a `<label htmlFor>`).
+- **`Coverflow`**: a 3D carousel seen from inside a ring of image cards. The
+  front card faces the viewer, the cards on either side turn toward it, and
+  every card stands on a glass reflection that fades into the floor; the
+  front item's `caption` node shows beneath, in a polite live region. It never
+  runs out: a short list is repeated round the ring. Arrows, ← / →, a swipe,
+  a dot or a click on a side card turns it; `onOpen` makes the front card a
+  button. `aspect` (`landscape` | `square`), `variant` (`card` | `cutout`),
+  `reflection`, controlled `index` / `onIndexChange`, `autoplay` / `delay`
+  (as in `Carousel`; never under reduced motion, off screen, in a hidden tab
+  or while in use), `renderFace` for pictures that are not a plain URL, and
+  translated `labels`. It draws no background: put it on a dark floor.
+- **`HorizontalStepper`**: a few stops in a row joined by a line (requested,
+  building, shipped), the horizontal sibling of `VerticalStepper` with the same
+  step `status` values. `color` fills the steps reached and the line up to the
+  current one; `size="sm"` for a card; `tone="inverse"` for a dark overlay;
+  `animateIn="media-card-reveal"` pops the nodes in and fills the line each time
+  the surrounding `MediaCard` reveals. One image to assistive technology
+  (`ariaLabel`).
+- **`ExpandableText`**: text clamped to `lines` with a "Show more" link that
+  appears only when the text is really cut off (measured with a
+  ResizeObserver). `mode="inline"` grows in place; `mode="overlay"` opens the
+  full text, with an optional `header` and `footer`, over the nearest
+  positioned ancestor as a circle growing from the link, so a card never
+  changes height. Escape closes it and focus returns to the link.
+- **`ReactionButton`**: a reaction with its count (a like, an upvote, a want),
+  `aria-pressed`; switching it on pops the mark, spreads a ring, bursts the
+  sparkle and ticks the count (`animate-heart-pop`, `animate-espd-ripple`,
+  `animate-sparkle`, `animate-rise-in`); switching off plays nothing.
+- **`PageBanner`**: an outlined banner at the top of a page or tab — `kicker`,
+  `title`, `description`, `meta`, `action` and aria-hidden `decoration` —
+  stacking into one column on a narrow screen.
+- **`OverflowBadgeList` `singleLine`, `overflowAs` and `badgeClassName`**
+  (all optional, defaults unchanged). `singleLine` never wraps: the last
+  visible badge shrinks with an ellipsis so the overflow label stays whole.
+  `overflowAs="text" | "badge"` makes the overflow label a button whose
+  popover lists the HIDDEN items on hover, focus or tap; unset keeps the
+  original hover tooltip of every item. `badgeColor` (and an item's `color`)
+  now take any `Color` a badge does, `"silver"` included; the five presets
+  keep working as before. Compiled CSS gains the utilities these
+  five use (`line-clamp-2`…`6`, `scale-x-0`, `origin-left`, `max-w-140`,
+  `font-extrabold` and a few sizes), all inert unless used.
+- **Celebration animations for a toggle switched on**: `animate-heart-pop`
+  (a like), `animate-bookmark-drop` (a save) and `animate-sparkle` (six dots
+  in the brand colours bursting from one element; pair with
+  `animate-espd-ripple` for a ring). Switching off plays nothing; wrap them in
+  `motion-safe:`.
+- **`ToggleGroup` `variant`**: `default` (the control frame, as before),
+  `rounded` (a pill) and `glow` (a pill with a halo) — the same frames as
+  `TabsList`, so a segment control can sit beside a glowing tab list. The
+  rounded border and the glow take the group's `color`.
+- **`glow` on `Button` and `TabsList`.** `Button variant="glow"` is the
+  `outline` button with the soft halo in its `color` that Badge, Alert and
+  Tag use for their `glow` variant (`shadow-glow`, the colour at 45%); the
+  halo replaces the elevation shadow, so `elevation` does not apply to it,
+  while `radius` and `border` do. `TabsList variant="glow"` is the `rounded`
+  list with the same halo in `primary`; its scroller keeps a 12px gutter
+  around the list so the halo is not clipped. Compiled CSS gains `.-m-3`.
+- **`MediaCardImage`**, the picture in a `MediaCardMedia` with its loading
+  handled: a pulsing placeholder until it arrives, then a fade-in (none under
+  reduced motion), and its `fallback` in its place if it fails. `fit`
+  (`cover` / `contain`), lazy by default, `eager` for the first screenful.
+- **`MediaCard`**: a card led by a picture that opens as one link. The title's
+  `MediaCardLink` (an `<a>`, or your router's link with `asChild`) is
+  stretched over the whole card; `MediaCardAction` lifts a button above it,
+  so a button is never nested in the link. Parts: `MediaCardMedia` (16:9,
+  `layout="bleed"` for a photo or `"inset"` for a tile on a tint),
+  `MediaCardBody`, `MediaCardTitle`, `MediaCardMeta`, `MediaCardFooter`. It
+  lifts on hover and keyboard focus (`lift`), and rings when its link has
+  focus. `MediaCardReveal` adds a layer over the media on hover and focus:
+  `variant="circle"` opens a scrim from the centre with a ring bursting out
+  and springs its parts in, in order (`MediaCardRevealItem`,
+  `MediaCardRevealChips`, `MediaCardRevealFooter` with an `action` that
+  swings in last), hidden on touch screens; `variant="strip"` fades a strip
+  of actions in along the bottom, always shown on touch screens. Nothing
+  moves under reduced motion. The circle has no backdrop blur on purpose:
+  Chrome paints a backdrop-filter across the whole layer while its clip-path
+  animates, and the circle never shows.
+- **`Avatar` `color`.** The initial's circle was always `primary`; it now takes
+  any preset (filled with that colour, the initial in its `-foreground`) or
+  any CSS colour. Defaults to `primary`, so existing avatars are unchanged.
+  Behind it, `resolveColor` gains an `fg` target: the text that reads on a
+  fill of the colour (the preset's foreground token, or
+  `--espd-on-solid-foreground` for an arbitrary colour, as `solid` uses).
+- **`AvatarGroup`.** A row of overlapping avatars on rings of the page
+  background, with a "+N" chip past `max` or up to `total` (the five most
+  active of 31 people). `label` names the group; without it the row is
+  decorative.
+- **`Identicon`.** A generated avatar drawn from a grid of cells (`cells`,
+  row by row, `columns` default 5) in `currentColor`. It takes the cells rather
+  than a name, so the app that owns an identity also owns how it becomes a
+  picture.
+- **`Avatar` `size="xl"` and `fallback`.** A 76px tile for a profile card, and
+  any node (an `Identicon`) in place of the initial when there is no image.
+  `AvatarSize` names the sizes.
+- **Swatch colours** `--color-swatch-1…5` (an ink) and `--color-swatch-1…5-light`
+  (its tint), light and dark: five categorical colours for telling things apart
+  by colour alone (one person's tile from the next), picked by a stable hash,
+  never by meaning.
+- **Scrim colours** `--color-scrim` / `--color-scrim-foreground`: a dark
+  see-through layer over content and the text that reads on it, the same in
+  both themes (`bg-scrim/85 text-scrim-foreground`).
+- **`ease-overshoot`** (a bigger overshoot than `ease-spring`, for chips and
+  buttons popping into place) and **`animate-burst`** (one ring bursting out
+  of a mark to 3.4x and fading, 0.6 s).
+- **`animate-spin-slow`** (90 s, linear, endless) for background decoration,
+  and the **circular reveal** utilities `clip-circle-closed`,
+  `clip-circle-open` and `transition-clip` (clip and visibility together), for
+  a panel that opens from its centre over a card.
+- **Tabs collapsible to icons.** `TabsTrigger` takes an `icon` (placed inside
+  an `asChild` child too, so a router link keeps working), and `TabsList`
+  takes `collapsible` (with `collapsed` / `defaultCollapsed` /
+  `onCollapsedChange`): clicking the selected tab folds every trigger that has
+  an icon to just its icon, and clicking it again restores the labels. The
+  state belongs to the list, so it holds as the selection moves; a trigger
+  without an icon keeps its label and does not toggle. Folding is animated:
+  each label squeezes shut on a spring (width, fade, a touch of blur) while its
+  icon gives a small wiggle, and the highlight follows the shrinking tab;
+  nothing moves under reduced motion. Labels stay in the DOM, so they remain
+  the tabs' accessible names while folded.
+- **`SearchBox` `value` / `defaultValue`.** Pass `value` with `onValueChange`
+  to drive the box from outside (a "Clear all" button, the URL's `?q=`);
+  omit it and the box keeps its own text, now seeded from `defaultValue`.
+- **`Popover` `openOnHover`** (with `openDelay`, 120 ms, and `closeDelay`,
+  150 ms). Opens when a mouse rests on the trigger or keyboard focus reaches
+  it, and stays open while the pointer is over the content. A click still
+  toggles it, so touch screens work as before; a click on a hover-opened
+  popover pins it open. The focus a close returns to the trigger does not
+  reopen it, and a hover that ends does not pull focus back.
+- **View transitions.** `startViewTransition(update)` in `/utils` runs a
+  React state change inside the browser's view transition (directly where it
+  is unsupported or reduced motion is asked for). Two utilities name what
+  moves: `view-transition-morph` (the one element that becomes another, drawn
+  above the page, 0.6 s spring) and `view-transition-glide` (every member of a
+  set moving on its own via `match-element`, 0.5 s spring).
+- **`below-navbar` spacing** (`top-below-navbar`, `scroll-mt-below-navbar`, …):
+  the clearance under a sticky `NavBar` — its height, the gap it floats at once
+  morphed into a pill, and a little air — so a sticky side panel or an anchor
+  target is never covered by the bar.
+- **Entrance animations** `animate-pop-in`, `animate-slide-in-start` and
+  `animate-rise-in`, with their keyframes; also the fallbacks where view
+  transitions are unsupported.
+- **Per-component and grouped entry points.**
+  `@espressif/dashboard-ui-components/components/<folder>` exposes one
+  component folder (`/components/button`, `/components/dialog`, … 98 of them,
+  plus `/components/combobox`), and `/charts`, `/data-table`, `/markdown`,
+  `/date`, `/carousel`, `/forms`, `/animation` and `/toast` each expose one
+  heavy family. They export exactly the names `/components` exports for that
+  folder, bound to the same modules, so mixing paths never duplicates a
+  component or its context. Production bundles were already tree-shaken; the
+  gain is for test runners, dev servers and CommonJS tooling, which evaluate
+  everything an entry reaches: a Vitest + jsdom suite can now import
+  `/components/button` with no stubs. `./package.json` is exported too.
+
+  **Upgrading:** optional. Import from the narrowest path you can. The
+  `/components` barrel and the root still export everything, unchanged.
+- **`theme.css`, a tokens-only stylesheet**
+  (`@espressif/dashboard-ui-components/theme.css`): every token, the `dark`
+  variant, keyframes, the library's `@source` and the border colour the
+  components rely on, without `@import "tailwindcss"`, Preflight or page
+  styles, for apps that bring their own Tailwind. `./styles` is now built from
+  it and compiles to the same CSS (rules reordered where they do not overlap).
+- **Dark mode through `data-theme="dark"`** as well as the `.dark` class: the
+  `dark:` variant and every dark token block also match
+  `[data-theme="dark"]` and its descendants. Apps that only use `.dark` see
+  no change.
+- **Semantic tokens beyond colour**, each defaulting to the value it replaces:
+  `--espd-control-height-sm|md|lg` (buttons, inputs, selects, toggles),
+  `--espd-button-padding-x-sm|md|lg`, `--espd-duration-fast|normal|slow`,
+  `--espd-ring-width`, `--espd-ring-offset` and `--espd-on-solid-foreground`
+  (text on a `solid` surface of an arbitrary colour). Every reader also
+  carries the default as a `var()` fallback. The compiled stylesheet only
+  gains rules: the three white-text utilities components no longer use stay
+  generated. What is already overridable and what is still hard-coded is in
+  `docs/token-audit.md`.
+- **Variants an app can add.** `Variant` is now `keyof VariantRegistry`, an
+  interface an app augments (`declare module "…/components" { interface
+  VariantRegistry { glow: true } }`); `registerVariant(name, recipe)` supplies
+  the styles at runtime and `listVariants()` lists built-ins plus registered
+  ones. Every variant-driven component accepts a registered variant. The four
+  built-ins cannot be replaced, `VARIANTS` still lists only them, and an
+  unknown, unregistered variant behaves as before. Also exported from
+  `/utils`, with `VARIANTS` and `resolveVariantStyles`.
+- **Style-axis registries** (radius, elevation, border, density), the
+  groundwork for per-role tokens and per-instance props: `Radius`,
+  `Elevation`, `Border` and `Density` are `keyof` interfaces an app augments
+  like `VariantRegistry`; `registerStyleValue(axis, name, css)` and
+  `registerDensity(name, tokens)` add values (built-ins cannot be replaced),
+  `listStyleValues` and `resolveStyleValue` / `resolveDensity` read them, and
+  `useStyleAxes` builds a component root's style from the props. A value is
+  CSS, not a class, so a registered value needs no generated Tailwind class.
+  No component takes these props yet. Exported from `/components` and
+  `/utils`. The compiled stylesheet gains the inert `--shadow-xs` …
+  `--shadow-xl` declarations on `:root`, which the elevation values read.
+- **Role tokens for controls.** `--espd-radius-control`,
+  `--espd-border-width-control` and `--espd-elevation-control` give every
+  control one corner radius, border width or shadow: Button (both bases),
+  FlashButton, InvertButton, CopyButton, Input (and its add-ons), Textarea,
+  Select, SearchBox, AdvancedSearchBox, FileInput, InputOTP, TagInput,
+  Toggle, ToggleGroup, Combobox, AsyncMultiSelect and the date-picker
+  triggers. Elevation applies to the buttons that draw a shadow (default and
+  outline). All ten role tokens (control, surface, overlay, pill, item) are
+  declared on `:root` as `initial`, which means unset: each component keeps
+  its own value until an app sets the token, so nothing changes by default.
+  An app's `className` still wins over a token: `cn` now treats a labelled
+  `shadow-[shadow:…]` class as a shadow, so `shadow-none` replaces it.
+  `rounded-s-lg` and `rounded-e-lg` stay generated although Input no longer
+  uses them.
+- **Role tokens for surfaces.** `--espd-radius-surface`,
+  `--espd-border-width-surface` and `--espd-elevation-surface` reach Card
+  (and SimpleCard), CollapsibleCard, StatCard (every size), Alert,
+  IconTextActionCard, SimpleInfoCard, SimpleClickableCard, the
+  SelectableCardList items, FileUpload, CodeEditor, Code, DataTable (with
+  `showBorder`), ListDetails, ScrollableSections and StatusCardList. Radius
+  reaches all of them; border width the ones with their own border; elevation
+  Card, CollapsibleCard and PageContainer's elevated header (unset, the
+  header keeps its accent-tinted shadow; set, the token's shadow and colour
+  replace it; `shadow-md` stays generated). Explicit opt-outs keep their
+  literals (SimpleCard
+  `noShadow` / `noBorder`, NoDataCard). SectionCard takes radius and
+  elevation; its border comes from its variant styles.
+  `rounded-xl` and `rounded-3xl` stay generated.
+- **Role tokens for overlays.** `--espd-radius-overlay` and
+  `--espd-elevation-overlay` reach Dialog, CommandDialog, Sheet, Popover, the
+  date-picker popovers, DropdownMenu (and its submenus), Select content,
+  Combobox's list, Tooltip, Toast, PreviewCard, the NavBar details panel, the
+  collapsed Sidebar flyout and the chart tooltip, each falling back to its own
+  radius and shadow. Overlays render in portals, so set these on `:root` (or
+  `<html>`), not on a wrapper. FullscreenDialog keeps its square corners.
+  `rounded-2xl`, `rounded-l-2xl`, `rounded-r-2xl` and `shadow-xl` stay
+  generated.
+- **Role token for pills.** `--espd-radius-pill` reaches Badge (and so
+  UserTypeBadge and OverflowBadgeList), Tag and its name chip (and so
+  TagInput's chips), StatusBadge and StatCard's trend badge, each falling
+  back to its own radius (`md` for Badge, `full` for StatusBadge). Tag's
+  `rounded` prop still makes it fully round.
+- **Role token for items.** `--espd-radius-item` reaches the rows of
+  Select, DropdownMenu (items, checkbox and radio items, sub-triggers and the
+  hover highlight), Command / Combobox, Sidebar (menu buttons, sub-buttons and
+  the active highlight), NavBar, Tabs (triggers and highlight), List (and so
+  Menu), TransferList and Calendar day cells (today, a selected day, range
+  start and end, and the row ends inside a range; the range middle stays
+  square), each falling back to its own radius. Calendar days used to follow
+  Button's control radius; they now follow the item token. NavBar's
+  `isPill` and the Tabs `rounded` variant keep their full rounding.
+  `rounded-[10px]` and Calendar's old `rounded-*-md` utilities stay generated.
+- **`radius`, `elevation` and `border` props on one component**, through
+  `useStyleAxes`. A value affects that component only: the private variables
+  (`--espd-own-radius`, `--espd-own-elevation`, `--espd-own-border-width`)
+  are registered non-inheriting in the new `src/styles/style-axes.css`
+  (imported by `theme.css`), so components nested inside keep their own look.
+  With no prop the DOM is unchanged. Precedence: `className` > prop > role
+  token > the component's own default.
+  - Controls: Button (all three; `border` on `outline`), FlashButton,
+    InvertButton, CopyButton (`radius`), Input, Textarea, SelectTrigger,
+    SearchBox, AdvancedSearchBox, FileInput, TagInput, AsyncCombobox,
+    AsyncMultiSelect (`radius`, `border`), InputOTP, DatePicker,
+    DateTimePicker, DateRangePicker (trigger), ToggleGroup (`radius`).
+  - Surfaces: Card, SimpleCard, CollapsibleCard (all three), SectionCard
+    (`radius`, `elevation`), StatCard, Alert, IconTextActionCard,
+    SimpleInfoCard, SimpleClickableCard, FileUpload, ListDetails,
+    StatusCardList (`radius`), SelectableCardList, CodeEditor, Code,
+    DataTable, `ScrollableSections.Tabs` (`radius`, `border`).
+  - Overlays: DialogContent, SheetContent, PopoverContent,
+    DropdownMenuContent, DropdownMenuSubContent, SelectContent,
+    PreviewCardPanel (`radius`, `elevation`). The date pickers' calendar
+    popovers (and DateRangePicker's side calendar panel) take
+    `popoverRadius` and `popoverElevation` on DatePicker, DateTimePicker
+    and DateRangePicker; their `radius` stays the trigger's.
+    TooltipContent and the `Tooltip` wrapper take `radius` and
+    `elevation`; a tooltip draws no shadow by default, so its elevation
+    reads the prop only (the overlay elevation token does not reach it).
+    Toast (also through `toast({ title, radius, elevation })`) and
+    ChartTooltipContent take `radius` and `elevation`; AreaChart, BarChart,
+    ComposedChart, DonutChart, LineChart and TreemapChart forward
+    `tooltipRadius` / `tooltipElevation` to their hover tooltip; Sidebar
+    takes `flyoutRadius` / `flyoutElevation` for the menu a group opens
+    while the sidebar is collapsed to icons.
+  - Pills: Badge, Tag, StatusBadge, UserTypeBadge, OverflowBadgeList
+    (`radius`).
+
+  The older props keep working and lose to the new one when both are set:
+  `rounded` (Input, InputOTP, FileInput, Tag, TagInput, the date pickers)
+  is `radius="full"`; SimpleCard's `noShadow` / `noBorder` are
+  `elevation="none"` / `border="none"`. The animate-ui highlight primitive
+  keeps an item's own `style` when it clones it (it used to replace it).
+- **Density.** `density="compact" | "default" | "comfortable"` on Table,
+  DataTable, Card, List, SimpleList, FiltersBar, Sidebar (desktop),
+  DialogContent and SheetContent scales controls, table head and cells, list
+  rows, sidebar rows and two gaps together; `default` is today's look. New
+  tokens, defaulting to today: `--espd-table-head-height`,
+  `--espd-table-cell-padding`, `--espd-sidebar-row-height` (+ `-sm`),
+  `--espd-item-height` for List rows (falls back to `--menu-item-height`),
+  `--espd-gap-field` (FormItem's spacing between label, control and
+  message) and `--espd-gap-stack` (DialogContent's gap between header, body
+  and footer). A `space-y-*` / `gap-*` class an app passes still wins.
+  `registerDensity(name, tokens)` adds a density; `densityStyle` and
+  `DensityProps` are exported.
+- **`StyleScope`** (`/components/style-scope`): role tokens per role
+  (`radius={{ control: "full" }}`, `elevation`, `border`) and a `density` for
+  a subtree, on a `display: contents` wrapper or, with `asChild`, on its
+  child. Overlays render in portals outside it; set their tokens on `:root`.
+  `min-h-[var(--menu-item-height)]` stays generated.
+- **`SectionCard` `expandOnHover`** (default `false`): the card starts
+  collapsed, expands while the pointer is over it or keyboard focus is inside
+  it, and collapses once it leaves. No chevron is shown; `allowCollapse`,
+  `hideCollapseIcon`, `defaultOpen`, `open` and `fillHeight` are ignored, and
+  `onOpenChange` still fires. The height transition reverses smoothly when
+  the pointer leaves mid-way and respects `prefers-reduced-motion`. On touch
+  screens a tap on the header toggles the body.
+- **Sonner's toast styles in `./styles`.** The Toast component still imports
+  them from JavaScript (kept for compatibility); duplicate rules are harmless.
+- **`--font-mono` token** beside `--font-sans`. The library's own components
+  already use `font-mono` (`CodeEditor`, `MonospaceContent`, code in
+  `MarkdownContent`, chart tooltips) but never declared the token, so they
+  inherited Tailwind's default and an app had no library token to override.
+  The default value is that same Tailwind stack, so nothing changes until an
+  app sets its own in `@theme`.
+- **Segmented stacked bars.** `BarChart` takes `segmented` (with `stacked`):
+  each segment is its own pill with a `segmentGap` (default `4`px) between
+  segments, and the stack's outer ends stay flush with the plot. With
+  `layout="vertical"` and hidden axes it draws a single distribution bar.
+- **List legends on every chart.** `legendLayout="rows"` lists one entry per
+  line (swatch, label, then the value aligned right) below the chart;
+  `"columns"` splits those rows over `legendColumns` columns (default `2`)
+  and falls back to one column when the legend is narrower than 28rem.
+  `legendValue` picks `value` (default), `percent`, `both` or `none`;
+  cartesian charts show each series' total across `data`. Also
+  `legendValueFormatter` and `legendClassName`, and `ChartLegendList` for
+  custom charts. The default `legendLayout="inline"` is unchanged.
+- **`MinimalWorkspaceLayout`** (`/layouts`): a header-less app shell with
+  its own look. The sidebar runs the full height of the window on the page
+  background, separated from the content only by a hairline border, so the
+  content seems to own the screen; expanded, it lifts with a soft, wide
+  shadow. Border, shadow and selected-row colours are mixed from the sidebar's surface, so
+  they follow any surface an app sets, light or dark. It starts as a 56px icon
+  rail and expands into the labelled sidebar: from an expand button that
+  replaces the logo on hover, from a click on any empty part of the rail
+  (double-arrow cursor), or with ⌘/Ctrl+B; a collapse button sits beside the
+  expanded logo. Top to bottom the sidebar holds the logo, an optional
+  `sidebarConfig.header` (a node, or a function of `{ collapsed }`), the menu,
+  the footer and the account menu (avatar in the rail, avatar + name + email
+  when expanded). `topRightContent` floats over the content's top-right
+  corner. It takes WorkspaceLayout's props, so switching is a rename:
+  `footerConfig`, `hideBreadcrumbs`, `sidebarConfig.allowCollapsible` and
+  `sidebarConfig.variant` are dropped, `headerConfig.rightContent` becomes the
+  top-right content, and `defaultSidebarOpen` defaults to `false`. Sizes,
+  surfaces (separately for the rail and the expanded sidebar), row accent, border, shadow,
+  height and timing are `--espd-minimal-workspace-layout-*` tokens; the logos
+  crossfade, and right after expanding the menu rows pop in one by one (a group's rows cascading after it, icons popping a beat later), all off under
+  `prefers-reduced-motion`. With `sidebarConfig.hideWhenCollapsed` the
+  collapsed sidebar is gone entirely instead of a rail, and the content takes
+  the full width: hovering the content's left edge shows a strip in the
+  primary colour, and a click there slides the full sidebar in over the
+  content (a peek, under a wider shadow) until the pointer leaves it;
+  `MinimalWorkspaceSidebarTrigger`, an exported button for
+  `topRightContent`, or ⌘/Ctrl+B opens it inline beside the content and
+  closes it again. A peek is never reported through `onSidebarOpenChange`;
+  `labels.showSidebar` / `hideSidebar` name the trigger.
+- **Sidebar** takes `beforeContent` (a region between the header and the
+  menu), `headerClassName`, `className`, `id` and `onClick` for the desktop
+  container, and `mobileClassName` for the mobile sheet's panel.
+- **`AccountMenu` / `MyAccountMenu`** take `triggerVariant="card"` (avatar,
+  name and email in a full-width row, for sidebars), `side` and `align`. The
+  default trigger is unchanged.
+- **Stylesheet additions (inert unless used):** the
+  `--espd-minimal-workspace-layout-*` tokens on `:root` (among them
+  `-edge-color`, `-edge-width` and `-sidebar-overlay-elevation` for a hidden
+  sidebar) and the `espd-pop-in` / `espd-icon-pop` / `espd-fade-in`
+  keyframes.
+- **`glow`, a fifth built-in variant** (`variant="glow"` on Badge, Alert,
+  Tag, StatusBadge, the cards, Toast and every other variant-driven
+  component): a faint tint, a hairline border and a soft, tight halo, each a
+  fraction of the colour, for every preset colour, `silver` and any CSS
+  colour. It is the recipe the demo used to register for itself, now built
+  in, with a `--shadow-glow` token for its halo (`cn` files `shadow-glow` as
+  a shadow size, so merging it beside a shadow colour keeps both). `VARIANTS`
+  and `listVariants()` now start with five names.
+
+  **Upgrading:** an app that registered its own `glow` with
+  `registerVariant` now gets a warning and the built-in; rename its variant to
+  keep it. `Record<Variant, …>` maps an app keeps need a `glow` entry.
+- **`Carousel` takes `align`** (`'start' | 'center' | 'end'`, default
+  `'center'` as before; type `CarouselAlign`). Use `'start'` for slides of
+  different widths, such as chips: centred and then held inside the row's
+  bounds, the first step barely moved and the next one jumped.
+- **Marketing and motion tokens (inert unless used):** `text-display` and
+  `text-lead` (fluid headline and lead-paragraph sizes, with their line
+  height, tracking and weight), `ease-spring` and `ease-emphasized`,
+  `animate-espd-ripple` with its `espd-ripple` keyframes, a `scrollbar-none`
+  utility for a swipeable row with its own arrows, and `transition-draw`
+  (an SVG line drawing in: dash offset and opacity only).
+
+### Changed
+- **The `tailwindcss` peer range is now `^4.1.0`** (was `^4.0.0`).
+  `Coverflow`'s reflection fades with the `mask-*` utilities, which arrived
+  in Tailwind 4.1; on 4.0 the reflection would show with a hard edge. Nothing
+  else depends on 4.1.
+- **`LottieAnimationContainer` loads the Lottie player on first mount**
+  instead of at import, keeping its size while it loads. Importing the
+  library no longer evaluates `lottie-web`, which touched `<canvas>` at import
+  (breaking jsdom test suites) and uses `eval` (rejected by a strict CSP).
+  Apps that never render an animation never load it.
+- **`@base-ui-components/react` 1.0.0-rc.0 → `@base-ui/react` ^1.8.0** (the
+  package was renamed; the old one is deprecated). `PreviewCard`,
+  `ProgressBar` and `RadioGroup` render and behave as before on 1.8 and 1.9;
+  their prop types only gained optional props or widened. The range starts
+  at 1.8 so apps with a package-age cooldown (pnpm `minimumReleaseAge`) can
+  still resolve a version.
+- **`Tag`: `value` is required and `name` is optional** (breaking for
+  types). Without `name` the tinted name chip is not rendered and the tag
+  shows only `value`. Both segments use the font's own line height
+  (`line-height: normal`); the name gets a
+  faint contour and a tight text shadow. Each truncates with an ellipsis at a capped width;
+  the new `showFullName` and `showFullValue` props (default `false`) let it
+  wrap instead, and drop the default tooltip for that segment. With
+  `onDelete`, the end padding shrinks to match the vertical padding, and the
+  delete button is round only with `rounded`; otherwise its corners follow
+  the tag's (pill radius minus its inset). The `success` name chip on the
+  `outline` and `gradient` variants is `bg-success/20` (was `/15`).
+  TagInput's single-label chips now pass the tag as `value`.
+
+  **Upgrading:** a `Tag` with only `name` becomes `<Tag value="…" />`
+  (`nameTooltip` → `valueTooltip`). It then renders without the name chip.
+
+### Deprecated
+- **Layout height tokens renamed by owner.** With more layouts coming, the
+  generic names are replaced by names that say whose height they are:
+
+  | Deprecated (1.x) | New |
+  |---|---|
+  | `--espd-header-height` | `--espd-shell-header-height` (any layout's top bar; AppLogo and the workspace header read it) |
+  | `--espd-footer-height` | `--espd-workspace-layout-footer-height` |
+  | `--espd-hidden-footer-height` | `--espd-workspace-layout-hidden-footer-height` |
+
+  The new names are not declared: every read falls back to the deprecated
+  name, which keeps its default. An app that overrides an old name, at any
+  selector including `.dark`, sees no change; one that sets a new name wins
+  over the old. The compiled classes that read the old names stay generated.
+
+  **Upgrading:** optional in 1.x. Rename your overrides, and any of your own
+  CSS that reads these tokens (e.g. `calc(var(--espd-header-height) + 8rem)`),
+  together: a stylesheet that sets the new name but reads the old one gets
+  the default. The deprecated names are removed in 2.0.
+
+### Fixed
+- **`AsyncMultiSelect`'s `label` names its combobox.** The `<label>` was not
+  linked to the trigger, and a combobox does not take its name from its
+  content, so screen readers announced an unnamed combobox.
+- **An `Input` with an add-on rings as one control.** Keyboard focus in the
+  field used to ring the text part only, stopping short of the add-on beside
+  it, so a button add-on (`endAddOnContent`) read as a separate box. The ring
+  now goes around the field and its add-ons together, in the error colour when
+  the field is in error. A control inside an add-on keeps its own ring when it
+  has the focus itself. Fields without add-ons are unchanged.
+- **A sidebar row for the root (`/`) is selected only on the root.** Rows
+  match the current path as a prefix (so `/nodes/42` selects `/nodes`), and
+  every path starts with `/`: a Home row lit up beside whichever row was
+  really current. The breadcrumbs still treat the root as every page's
+  ancestor.
+- **A `MediaCard`'s circle reveal no longer swallows clicks.** The panel
+  lies over the card's stretched link, and caught the pointer itself, so a
+  click on an open panel did nothing, although the card read as one link.
+  Like the strip, it is now `pointer-events-none` with only its footer's
+  `action` taking the pointer: a click anywhere else opens the card. Content
+  that must be interactive belongs in the footer's `action`.
+- **`OverflowBadgeList`'s "+N" badge sits level with the others.** With
+  `overflowAs="badge"` its popover button was a block whose badge sat on a
+  text line, adding the descender below it (a 25px button around a 22px
+  badge); the button is `inline-flex` now.
+- **`Accordion` titles can fill the row and truncate.** A node `title` sat in
+  a wrapper that neither grew nor shrank, and the trigger kept its content's
+  width, so a title could not push a badge to the right edge and a long one
+  widened the row past its container instead of truncating. The wrapper is
+  `min-w-0 flex-1`, the trigger `min-w-0`, with a gap before the chevron.
+  String titles look as before.
+- **A scrolling tab list (and anything on `useScrollOverflow`) no longer keeps
+  a stale "more this way" edge** after content animates to a smaller size. The
+  tab highlight springing narrower overflowed the list for a moment and then
+  settled without another resize, so the fade and chevron stayed. It now keeps
+  measuring for a short while after each resize.
+- **`TabsTrigger`'s `onClick` no longer replaces selecting the tab.** It used
+  to override the trigger's own click handler, so a tab with an `onClick`
+  could not be selected by clicking it. The consumer's handler now runs first,
+  and `preventDefault()` in it keeps the selection where it is.
+- **`Button` with `asChild`** no longer throws ("Slot failed to slot onto its
+  children"). `<Button asChild startIcon={…}><a href="…">Label</a></Button>`
+  (or a router `Link`) renders one element with the button's classes, the
+  icons and the label. With `disabled` or `loading` the link gets
+  `aria-disabled`, `data-disabled`, `tabIndex={-1}` and the disabled look,
+  and its clicks are cancelled before the link's own `onClick`. Without
+  `asChild` the markup is unchanged.
+- **Sidebar's collapsed-group flyout scrolls.** A long group no longer runs
+  off the bottom of a short window: the flyout dropped an `overflow-visible`
+  that overrode its menu's own height cap and scrolling.
+- **`SectionCard`** no longer throws ("useContext must be used within
+  GlobalTooltipProvider") when its `secondaryText` overflows in an app that
+  has no `TooltipProvider`. The truncation tooltip now uses the app's
+  provider when there is one and brings its own otherwise.
+
+### Documentation
+- The styled `Button`, the uncoloured base `Button` in `/core` and the
+  styled Button's `fullWidth` default (`true`) are documented in JSDoc and the
+  README.
+
+### Internal
+- `usePrefersReducedMotion` moved out of `carousel.tsx` into
+  `src/core/hooks/`, shared with `Coverflow` (as is the new `useOnScreen`:
+  on screen and the tab visible). `Carousel` behaves as before.
+- **Backward-compatibility gate**, `npm run verify`: a public-API snapshot
+  (`api-snapshot.json`, removals fail), a compiled-stylesheet snapshot
+  (`snapshots/`), bundle budgets that also fail if a narrow entry reaches a
+  heavy dependency, and an unpublished `playground/` that installs the packed
+  library like a real app: a visual catalogue compared pixel for pixel
+  against the 1.11.0 baseline (light, dark, `theme.css`-only and
+  `data-theme`), Button hover/focus states, a minimal-consumer size
+  measurement and a no-stubs Vitest import suite. CI runs the API and CSS
+  checks and that the generated entries are current.
+
+## [1.11.2] - 2026-10-21
+
+### Fixed
+- **`SelectContent`** — a long list now stays on screen and scrolls. Its
+  height cap used the Tailwind v3 form `max-h-[--var]`, which Tailwind v4
+  compiles to invalid CSS, so the list had no max height: it opened past the
+  top of the viewport and could not scroll. It now uses `max-h-(--var)`.
+- **`SelectContent`** — scrolling no longer snaps back to the top when it
+  starts without the mouse over an item (touch, scrollbar drag). When a scroll
+  arrow appears, Radix scrolls the focused item back into view; focus now
+  moves to the listbox once that item leaves the viewport. After a scroll,
+  arrow keys start again from the first item.
+- **`SelectContent`, `PopoverContent`** — the open animation's transform
+  origin uses Tailwind v4 syntax (`origin-(--var)`), so it is applied again.
+
 ## [1.11.1] - 2026-10-21
 
 ### Fixed