@ultimat3/ui 20.1.6 → 20.2.0

package/CATALOG.md

@@ -4,7 +4,7 @@
 
 Every component and every token, projected from source. Import all of it from `@ultimat3/ui`.
 
-54 components: `Accordion` · `Alert` · `AppShell` · `AsyncRegion` · `Avatar` · `Badge` · `Breadcrumb` · `Button` · `Card` · `Checkbox` · `Combobox` · `Container` · `DataTable` · `DateTime` · `Dialog` · `Divider` · `Drawer` · `Dropzone` · `EmptyState` · `ErrorState` · `Field` · `FileInput` · `Form` · `Grid` · `Icon` · `IconButton` · `Image` · `InfiniteScroll` · `Input` · `Link` · `LocaleSwitcher` · `Menu` · `Money` · `PageHeader` · `Pagination` · `Popover` · `Radio` · `RelativeTime` · `Section` · `Select` · `Skeleton` · `Spinner` · `Stack` · `Switch` · `Table` · `Tabs` · `Text` · `Textarea` · `ThemeToggle` · `ToastRegion` · `Toast` · `Toaster` · `Toolbar` · `Tooltip`
+62 components: `Accordion` · `Alert` · `AppShell` · `AsyncRegion` · `Avatar` · `Badge` · `BarChart` · `Breadcrumb` · `Button` · `Card` · `Checkbox` · `Combobox` · `CommandPalette` · `Container` · `CopyButton` · `DataTable` · `DateTime` · `Dialog` · `Divider` · `Drawer` · `Dropzone` · `EmptyState` · `ErrorState` · `Field` · `FileInput` · `Form` · `Grid` · `Icon` · `IconButton` · `Image` · `InfiniteScroll` · `Input` · `Kbd` · `Link` · `LocaleSwitcher` · `Menu` · `Meter` · `Money` · `PageHeader` · `Pagination` · `Popover` · `QrCode` · `Radio` · `RelativeTime` · `Section` · `Select` · `Skeleton` · `Sparkline` · `Spinner` · `Stack` · `StatTile` · `Switch` · `Table` · `Tabs` · `Text` · `Textarea` · `ThemeToggle` · `ToastRegion` · `Toast` · `Toaster` · `Toolbar` · `Tooltip`
 
 ## Vocabulary
 
@@ -101,6 +101,17 @@ Small status label. Tone maps straight onto the status colour roles so the same
 | `dot` | `boolean` | — | Renders a leading dot; pair with a tone that carries the meaning. |
 | `class` | `string` | — |  |
 
+### BarChart
+
+A bar chart of one series — clicks per day, signups per week — as static SVG. No charting library: the framework's own docs use a sparkline pulling one in as the cautionary example, and a route's JS budget counts raw minified bytes. `<rect>` bars cost nothing to hydrate, so the server-rendered shell IS the chart. Geometry lives in `bar-chart-view.ts`.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `label` | `string` | yes | The accessible name for the whole chart, already translated. |
+| `points` | `readonly ChartPoint[]` | yes | Oldest first. Every bar comes from exactly this array — the caller zero-fills gaps. |
+| `highlightLast` | `boolean` | — | Draw the last bar at full strength — the eye lands where the live number is. Default on. |
+| `class` | `string` | — |  |
+
 ### Breadcrumb
 
 Ancestor trail. The last item is the current page: rendered as text, never a link, and marked `aria-current="page"`. Separators are decorative CSS.
@@ -191,6 +202,27 @@ A searchable text field with suggestions: one `<input list>` plus a `<datalist>`
 | `aria-describedby` | `string` | — |  |
 | `aria-invalid` | `boolean` | — |  |
 
+### CommandPalette
+
+The ⌘K palette: a filter field over a list of commands and destinations, in a NON-modal `<dialog>` driven by its `open` attribute — never `showModal()`, so a test harness with no dialog methods and a server with no DOM both render it the same way. Controlled and presentational: the open flag, the query and the active item all live in the caller, and the rules (`filterItems`, `stepActive`, `keyAction`) live in `command-palette-view.ts` so the caller does not rewrite them. Renders closed on the server unless told otherwise; with scripting off it is inert markup.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `open` | `boolean` | yes |  |
+| `labels` | `CommandPaletteLabels` | yes |  |
+| `query` | `string` | yes |  |
+| `items` | `readonly CommandPaletteItem[]` | yes | Already filtered — `filterItems(all, query)` is the caller's one line. |
+| `activeId` | `string` | — | The roving selection; `settleActive`/`stepActive` keep it inside `items`. |
+| `onQueryInput` | `(value: string) => void` | yes |  |
+| `onFilterKeyDown` | `(event: KeyboardEvent) => void` | yes | The raw key event; `keyAction(event.key)` says what it means. |
+| `onHoverItem` | `(id: string) => void` | yes |  |
+| `onRunItem` | `(id: string) => void` | yes |  |
+| `onClose` | `() => void` | yes |  |
+| `id` | `string` | — | The element's id, so a trigger can name it with `aria-controls`. |
+| `filterRef` | `((el: HTMLInputElement) => void)` | — | Refs out, so a caller can read focus or the attribute behind its own capability guard. |
+| `dialogRef` | `((el: HTMLDialogElement) => void)` | — |  |
+| `class` | `string` | — |  |
+
 ### Container
 
 Centred measure with a gutter. `margin-inline: auto` and `min()` mean one declaration covers every viewport and both writing directions.
@@ -203,6 +235,18 @@ Centred measure with a gutter. `margin-inline: auto` and `min()` mean one declar
 | `as` | `'div' \| 'main' \| 'section' \| 'article' \| 'header' \| 'footer'` | — |  |
 | `class` | `string` | — |  |
 
+### CopyButton
+
+Copies one string to the clipboard and says so — the control beside a short URL, an id, a command. Server-rendered as a real button; the clipboard write and the 1.6 s "copied" state are additive client behaviour, so with scripting off the button is there and does nothing, which is what a clipboard needs a script for anyway.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `value` | `string` | yes | What lands on the clipboard. |
+| `label` | `string` | — | The accessible name; defaults to the catalog's `ui.copy`. |
+| `copiedLabel` | `string` | — | Announced to assistive tech once the write succeeds; defaults to `ui.copied`. |
+| `size` | `Size` | — |  |
+| `class` | `string` | — |  |
+
 ### DataTable
 
 Data-driven table: sortable headers, cursor pagination, and the four states a real list always has (loading, error, empty, data). The error state renders an UltimateError with the same code/cause/fix strings the terminal prints.  The four-way decision itself is NOT here — it is `asyncBranch`, shared with `AsyncRegion`, so a table and a card list cannot disagree about what "loading with stale rows" looks like. Only the PLACEHOLDER is local, because a table's is table-shaped: rows of cells, not lines of text.
@@ -489,6 +533,15 @@ Single-line text control. No `type="number"` convenience wrapper: numeric input
 | `onChange` | `JSX.EventHandlerUnion<HTMLInputElement, Event>` | — |  |
 | `onBlur` | `JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>` | — |  |
 
+### Kbd
+
+A keyboard key or chord as the user reads it — "⌘K", "Esc", "/". A native `<kbd>`, because a keyboard hint is inline code, not a badge: the element carries the meaning, so it works with no script and reads as a key to a screen reader.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `children` | `JSX.Element` | yes | The key or chord, already translated where a key name is a word. |
+| `class` | `string` | — |  |
+
 ### Link
 
 Anchor primitive. External links get `rel` hardening and a translated "opens in a new tab" hint automatically — never a bare `target="_blank"`.
@@ -532,6 +585,18 @@ Action menu: a trigger plus a `role="menu"` list with roving tabindex. Distinct
 | `align` | `'start' \| 'end'` | — |  |
 | `class` | `string` | — |  |
 
+### Meter
+
+A thin horizontal bar showing one value against a maximum — a table cell's "how busy is this row" beside the number, or a quota. Decorative by default: with no `label` it is hidden from the accessibility tree, because the number beside it is the fact. With one it is a `meter` role with the value spoken.  An SVG with a `width` ATTRIBUTE rather than a styled box: it paints identically on the server copy and the hydrated one and asks nothing of the CSP's `style-src-attr`.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `value` | `number` | yes |  |
+| `max` | `number` | yes |  |
+| `label` | `string` | — | The accessible name. Omit for a purely decorative bar beside a visible number. |
+| `tone` | `Tone` | — |  |
+| `class` | `string` | — |  |
+
 ### Money
 
 Formats through @ultimat3/money using the locale and currency from context — never a process-wide default, never a float, never a hardcoded symbol.
@@ -591,6 +656,17 @@ Non-modal anchored panel. Positioning is CSS-only (a relatively positioned ancho
 | `align` | `'start' \| 'center' \| 'end'` | — |  |
 | `class` | `string` | — |  |
 
+### QrCode
+
+A QR code of one short value — a link's short URL, a join code — as static SVG from the pure-TypeScript encoder in `qr-encode.ts` / `qr-matrix.ts`. No QR library: a route's JS budget counts raw minified bytes, and one `<rect>` per dark module costs nothing to hydrate, so the server-rendered shell IS the code. Versions 1-3 only (42 bytes); longer is `X_UI_QR_CAPACITY`.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `value` | `string` | yes | What the code encodes — a short URL, at most 42 UTF-8 bytes. Longer throws. |
+| `label` | `string` | yes | The accessible name, already translated — say what scanning it does, not "QR code". |
+| `quietZone` | `number` | — | Light modules on every side. Default 4, the minimum a scanner needs to find the finders. |
+| `class` | `string` | — |  |
+
 ### Radio
 
 Radio group. Rendered as a <fieldset>/<legend> so the group has a name, and as one native radio per option so arrow-key navigation is the platform's job.
@@ -668,6 +744,16 @@ Loading placeholder. Sized by the caller so the real content lands in the same b
 | `lines` | `number` | — | Repeat as stacked lines, e.g. a paragraph placeholder. |
 | `class` | `string` | — |  |
 
+### Sparkline
+
+One series as a single line with no axes — the trend beside a figure, in a table cell, on a detail page. Static SVG for `BarChart`'s reason: the framework's own docs use a sparkline pulling in a chart library as the cautionary example, and this file IS that sparkline written the way the docs say to. The path comes from `sparkline-view.ts`.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `label` | `string` | yes | The accessible name for the whole chart, already translated. |
+| `points` | `readonly ChartPoint[]` | yes | Oldest first. Every point comes from exactly this array — the caller zero-fills gaps. |
+| `class` | `string` | — |  |
+
 ### Spinner
 
 Indeterminate progress. `role="status"` plus a translated name, because a spinner with no accessible name is silence to a screen reader.
@@ -694,6 +780,19 @@ Flex layout primitive. Gap comes from the space scale as a custom property, so t
 | `as` | `'div' \| 'ul' \| 'ol' \| 'nav' \| 'section' \| 'header' \| 'footer'` | — | Renders a semantic element instead of a div. |
 | `class` | `string` | — |  |
 
+### StatTile
+
+One labelled figure with an optional trend chip and a line of context — the tile a dashboard's top row is made of. The figure arrives formatted: number formatting is the caller's (`Intl.NumberFormat` against the page locale), so the tile never guesses a locale.  Intrinsic tags only: a runtime-chosen root (`const Tag = props.as ?? 'div'`) is called as a component by the island build, so a tile built on `Card` hydrated differently from how it was served. A `<div>` renders identically on both sides.
+
+| Prop | Type | Required | Notes |
+|---|---|---|---|
+| `label` | `string` | yes | The tile's caption, already translated — "Total links", "Clicks today". |
+| `value` | `string` | yes | The figure, already formatted as the string this tile shows. |
+| `stat` | `string` | yes | The stable hook a test or a live check reads the figure through: `data-stat`. |
+| `delta` | `StatDelta` | — | The trend chip; `deltaOf()` builds one from a current and a baseline. |
+| `hint` | `string` | — | One short line of context under the figure: "vs yesterday", "849 clicks". |
+| `class` | `string` | — |  |
+
 ### Switch
 
 Boolean toggle with immediate effect (as opposed to Checkbox, which is part of a form submit). `role="switch"` on a native checkbox keeps keyboard behaviour — and its checked state, which is why nothing here writes `aria-checked`: `role="switch"` maps the host `checked` state on its own, and an attribute mirroring it never updates on the no-JS path, where ARIA would then outrank the truth and announce the switch stuck in whichever position it was rendered in.

package/CLAUDE.md

@@ -106,7 +106,7 @@ Tier 4 (moved 5 → 4 on 2026-08-19, when the `admin → ui` exception was delet
 | `src/theme/inert-runtime.ts` | `INERT_SOLID_RUNTIME` — what a server render IS, not a stub of what it lacks |
 | `src/theme/theme.ts` | resolution: stored choice → OS; all side effects via injected `ThemeEnv` |
 | `src/theme/inline-script.ts` | anti-flash `<head>` snippet + its CSP sha256 |
-| `src/components/` | 50 components, `PascalCase.tsx` (component convention overrides the repo's kebab-case) |
+| `src/components/` | 62 components, `PascalCase.tsx` (component convention overrides the repo's kebab-case) |
 | `src/icons/glyphs/` | GENERATED: 1767 per-icon modules, `@ultimat3/ui/icons/<name>` → `icon<Name>` |
 | `src/icons/build-icons.ts` | the generator + the pinned `LUCIDE_VERSION`; `LICENSE.lucide` is upstream's ISC text |
 | `src/theme/brand.ts` | `defineTheme()` — the ONE brand-override seam; there is no SCSS `@use ... with ()` path |

package/README.md

@@ -542,6 +542,7 @@ of truth for the one thing the server decides.
 | `X_UI_RUNTIME_MISSING` | a DOM render with no registered Solid runtime, `<UiProvider>` on the server, or `browserThemeEnv()` off-DOM. A server render with no runtime is **not** one of them — it gets `INERT_SOLID_RUNTIME` |
 | `X_UI_FORM_PATH_INVALID` | a form field or control name the path grammar cannot read (`items.0.price`, `items[]`, `__proto__`), or two control names describing different shapes for one path (`user` beside `user.name`) |
 | `X_UI_CONTRAST_INSUFFICIENT` | a `defineTheme()` palette whose resolved channels put a pairing in `CONTRAST_PAIRS` below WCAG 2.2 AA — 4.5:1 for text, 3:1 for the focus ring. Only pairings the brand changed are measured; the cause names the measured ratio and the required one |
+| `X_UI_QR_CAPACITY` | a `<QrCode>` value over version 3's 42-byte ceiling (byte mode, error-correction level M). The encoder draws versions 1–3 only; the cause names the byte count and the ceiling |
 | `X_UI_INVALID_VALUE` | `<Money>` given a float, `<DateTime>` given an unparseable instant, `<Image>` given mixed `w`/`x` descriptors or one dimension without the other, a heading level off 1–6, a `defineTheme()` value that is not a token value, an `<Icon>` glyph with a tag/attribute/colour outside `ICON_TAGS`, two `Accordion` items sharing an id, `InfiniteScroll` with `hasMore` and no `nextHref`, a negative `debounce` window, or (`As of 2026-08`) upstream icon data `bun run icons` refuses (not an object, no renderable nodes, an attribute value that is not glyph geometry) |
 
 ## Commands

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/ui",
-  "version": "20.1.6",
+  "version": "20.2.0",
   "description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
   "license": "MIT",
   "type": "module",
@@ -44,10 +44,10 @@
     "icons": "bun run src/icons/build-icons.ts"
   },
   "dependencies": {
-    "@ultimat3/core": "20.1.6",
-    "@ultimat3/i18n": "20.1.6",
-    "@ultimat3/money": "20.1.6",
-    "@ultimat3/time": "20.1.6"
+    "@ultimat3/core": "20.2.0",
+    "@ultimat3/i18n": "20.2.0",
+    "@ultimat3/money": "20.2.0",
+    "@ultimat3/time": "20.2.0"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/components/BarChart.module.scss

@@ -0,0 +1,45 @@
+@use '../tokens' as t;
+
+.chart {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+}
+
+.grid {
+  stroke: t.role('line', 0.45);
+  stroke-width: 1;
+  // Hairlines stay hairlines however wide the chart is stretched.
+  vector-effect: non-scaling-stroke;
+  stroke-dasharray: 2 4;
+}
+
+.bar {
+  fill: t.role('accent');
+  opacity: 0.5;
+  // Only opacity, never a layout property: a hover that resized the bar would reflow every bar
+  // beside it.
+  transition: opacity t.duration(fast) t.easing(out);
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.last {
+  opacity: 1;
+}
+
+.axis {
+  @include t.data-text;
+
+  // SVG text scales with the chart: below `sm` these shrink to unreadable specks, and an
+  // unreadable label is noise. Every bar still carries its `<title>`.
+  display: none;
+  font-size: 8px;
+  fill: t.role('fg-muted');
+
+  @include t.respond-to(sm) {
+    display: block;
+  }
+}

package/src/components/BarChart.tsx

@@ -0,0 +1,78 @@
+// A bar chart of one series — clicks per day, signups per week — as static SVG. No charting
+// library: the framework's own docs use a sparkline pulling one in as the cautionary example, and
+// a route's JS budget counts raw minified bytes. `<rect>` bars cost nothing to hydrate, so the
+// server-rendered shell IS the chart. Geometry lives in `bar-chart-view.ts`.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import styles from './BarChart.module.scss';
+import type { ChartPoint } from './bar-chart-view';
+import { BAR_CHART, barRects, GRID_STEPS, gridY, maxOf } from './bar-chart-view';
+
+export interface BarChartProps {
+  /** The accessible name for the whole chart, already translated. */
+  label: string;
+  /** Oldest first. Every bar comes from exactly this array — the caller zero-fills gaps. */
+  points: readonly ChartPoint[];
+  /** Draw the last bar at full strength — the eye lands where the live number is. Default on. */
+  highlightLast?: boolean | undefined;
+  class?: string | undefined;
+}
+
+export function BarChart(props: BarChartProps): JSX.Element {
+  const rects = (): readonly ReturnType<typeof barRects>[number][] => barRects(props.points);
+  const lastIndex = (): number => props.points.length - 1;
+  const first = (): ChartPoint | undefined => props.points[0];
+  const last = (): ChartPoint | undefined => props.points.at(-1);
+  const highlight = (): boolean => props.highlightLast !== false;
+  return (
+    <svg
+      role="img"
+      aria-label={props.label}
+      viewBox={`0 0 ${BAR_CHART.width} ${BAR_CHART.height}`}
+      class={cx(styles['chart'], props.class)}
+    >
+      {GRID_STEPS.map((step) => (
+        <line
+          class={styles['grid']}
+          x1={0}
+          x2={BAR_CHART.width}
+          y1={gridY(step)}
+          y2={gridY(step)}
+        />
+      ))}
+      {props.points.map((point, index) => {
+        const rect = rects()[index];
+        if (rect === undefined) return null;
+        return (
+          <rect
+            class={cx(styles['bar'], highlight() && index === lastIndex() && styles['last'])}
+            x={rect.x}
+            y={rect.y}
+            width={rect.width}
+            height={rect.height}
+            rx={2}
+            data-bar="true"
+          >
+            <title>
+              {point.key}: {point.value}
+            </title>
+          </rect>
+        );
+      })}
+      <text class={styles['axis']} x={BAR_CHART.width} y={BAR_CHART.top - 3} text-anchor="end">
+        {maxOf(props.points)}
+      </text>
+      {first() === undefined ? null : (
+        <text class={styles['axis']} x={0} y={BAR_CHART.height - 3} text-anchor="start">
+          {first()?.key}
+        </text>
+      )}
+      {last() === undefined ? null : (
+        <text class={styles['axis']} x={BAR_CHART.width} y={BAR_CHART.height - 3} text-anchor="end">
+          {last()?.key}
+        </text>
+      )}
+    </svg>
+  );
+}

package/src/components/CommandPalette.module.scss

@@ -0,0 +1,110 @@
+@use '../tokens' as t;
+
+.palette {
+  position: fixed;
+  inset-block-start: 12vh;
+  inset-inline-start: 50%;
+  inline-size: min(32rem, calc(100vw - #{t.space(8)}));
+  max-block-size: 60vh;
+  margin: 0;
+  padding: 0;
+  border: 1px solid t.role('line');
+  border-radius: t.radius(lg);
+  background: t.role('surface-raised');
+  color: t.role('fg');
+  // Two shadows: the lift, and a viewport-sized spread that dims the page behind. A NON-modal
+  // `<dialog open>` has no `::backdrop` to style — this is the scrim.
+  box-shadow:
+    t.shadow(xl),
+    0 0 0 100vmax t.role('scrim', 0.55);
+  overflow: hidden;
+  z-index: t.z(dialog);
+
+  // Transform-only translate keeps the 50% inline offset from fighting `margin-inline`.
+  transform: translateX(-50%) translateY(-4px) scale(0.98);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    transform t.duration(fast) t.easing(out),
+    opacity t.duration(fast) t.easing(out),
+    visibility t.duration(fast) t.easing(out);
+
+  &[open] {
+    transform: translateX(-50%) translateY(0) scale(1);
+    opacity: 1;
+    visibility: visible;
+    transition-duration: t.duration(base);
+  }
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  max-block-size: 60vh;
+}
+
+.filterRow {
+  display: flex;
+  align-items: center;
+  gap: t.space(2);
+  padding: t.space(3) t.space(4);
+  border-block-end: 1px solid t.role('line');
+}
+
+.filter {
+  @include t.focus-ring;
+
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: t.role('fg-strong');
+  font-size: t.text(md);
+}
+
+.empty {
+  padding: t.space(6) t.space(4);
+  color: t.role('fg-muted');
+  text-align: center;
+}
+
+.list {
+  @include t.custom-scrollbar;
+
+  overflow-y: auto;
+  padding: t.space(2);
+  margin: 0;
+  list-style: none;
+}
+
+.item {
+  @include t.focus-ring;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: t.space(3);
+  inline-size: 100%;
+  padding: t.space(2) t.space(3);
+  border: 0;
+  border-radius: t.radius(sm);
+  background: transparent;
+  color: t.role('fg');
+  text-align: start;
+  cursor: pointer;
+
+  &[data-active='true'] {
+    background: t.role('bg-soft');
+  }
+}
+
+.label {
+  color: t.role('fg-strong');
+}
+
+.hint {
+  @include t.data-text;
+  @include t.truncate;
+
+  font-size: t.text(xs);
+  color: t.role('fg-muted');
+}

package/src/components/CommandPalette.tsx

@@ -0,0 +1,127 @@
+// The ⌘K palette: a filter field over a list of commands and destinations, in a NON-modal
+// `<dialog>` driven by its `open` attribute — never `showModal()`, so a test harness with no
+// dialog methods and a server with no DOM both render it the same way. Controlled and
+// presentational: the open flag, the query and the active item all live in the caller, and the
+// rules (`filterItems`, `stepActive`, `keyAction`) live in `command-palette-view.ts` so the caller
+// does not rewrite them. Renders closed on the server unless told otherwise; with scripting off
+// it is inert markup.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import { solid } from '../theme/solid-adapter';
+import styles from './CommandPalette.module.scss';
+import type { CommandPaletteItem } from './command-palette-view';
+import { Kbd } from './Kbd';
+
+/** Every string the palette renders, already translated. */
+export interface CommandPaletteLabels {
+  /** The dialog's accessible name. */
+  readonly title: string;
+  readonly filterLabel: string;
+  readonly filterPlaceholder: string;
+  /** Shown in place of the list when no item matches. */
+  readonly emptyText: string;
+  /** The `<Kbd>` beside the filter — "Esc" in the page's language. */
+  readonly escHint: string;
+}
+
+export interface CommandPaletteProps {
+  open: boolean;
+  labels: CommandPaletteLabels;
+  query: string;
+  /** Already filtered — `filterItems(all, query)` is the caller's one line. */
+  items: readonly CommandPaletteItem[];
+  /** The roving selection; `settleActive`/`stepActive` keep it inside `items`. */
+  activeId?: string | undefined;
+  onQueryInput: (value: string) => void;
+  /** The raw key event; `keyAction(event.key)` says what it means. */
+  onFilterKeyDown: (event: KeyboardEvent) => void;
+  onHoverItem: (id: string) => void;
+  onRunItem: (id: string) => void;
+  onClose: () => void;
+  /** The element's id, so a trigger can name it with `aria-controls`. */
+  id?: string | undefined;
+  /** Refs out, so a caller can read focus or the attribute behind its own capability guard. */
+  filterRef?: ((el: HTMLInputElement) => void) | undefined;
+  dialogRef?: ((el: HTMLDialogElement) => void) | undefined;
+  class?: string | undefined;
+}
+
+export function CommandPalette(props: CommandPaletteProps): JSX.Element {
+  const rt = solid();
+  let dialogEl: HTMLDialogElement | undefined;
+  let filterEl: HTMLInputElement | undefined;
+
+  // The attribute is ALSO written imperatively: a JSX-bound `open` compiles to a property
+  // assignment on the client, which a fake DOM never reflects; `setAttribute` is what a browser
+  // and a harness answer alike. Focus follows the write — an element under `display: none`
+  // ignores `.focus()`, so it cannot be called from the caller's own open handler.
+  rt.createEffect(() => {
+    if (dialogEl === undefined) return;
+    if (props.open) {
+      dialogEl.setAttribute('open', '');
+      if (filterEl !== undefined && typeof filterEl.focus === 'function') filterEl.focus();
+    } else {
+      dialogEl.removeAttribute('open');
+    }
+  });
+
+  return (
+    <dialog
+      ref={(el: HTMLDialogElement) => {
+        dialogEl = el;
+        props.dialogRef?.(el);
+      }}
+      id={props.id}
+      open={props.open ? true : undefined}
+      class={cx(styles['palette'], props.class)}
+      aria-label={props.labels.title}
+      onCancel={(event: Event) => {
+        event.preventDefault();
+        props.onClose();
+      }}
+    >
+      <div class={styles['panel']}>
+        <div class={styles['filterRow']}>
+          <input
+            ref={(el: HTMLInputElement) => {
+              filterEl = el;
+              props.filterRef?.(el);
+            }}
+            type="text"
+            class={styles['filter']}
+            aria-label={props.labels.filterLabel}
+            placeholder={props.labels.filterPlaceholder}
+            value={props.query}
+            onInput={(event) => props.onQueryInput(event.currentTarget.value)}
+            onKeyDown={props.onFilterKeyDown}
+          />
+          <Kbd>{props.labels.escHint}</Kbd>
+        </div>
+        {props.items.length === 0 ? (
+          <p class={styles['empty']}>{props.labels.emptyText}</p>
+        ) : (
+          <ul class={styles['list']}>
+            {props.items.map((item) => (
+              <li>
+                {/* A native button, never a row with a handler; roving TABINDEX, not roving focus. */}
+                <button
+                  type="button"
+                  class={styles['item']}
+                  data-active={item.id === props.activeId ? 'true' : undefined}
+                  tabIndex={item.id === props.activeId ? 0 : -1}
+                  onClick={() => props.onRunItem(item.id)}
+                  onMouseEnter={() => props.onHoverItem(item.id)}
+                  onKeyDown={props.onFilterKeyDown}
+                >
+                  <span class={styles['label']}>{item.label}</span>
+                  {item.hint === '' ? null : <span class={styles['hint']}>{item.hint}</span>}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </dialog>
+  );
+}

package/src/components/CopyButton.module.scss

@@ -0,0 +1,40 @@
+@use '../tokens' as t;
+
+.copy {
+  @include t.focus-ring;
+  @include t.transition(color, background-color, border-color);
+
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: t.radius(md);
+  background: transparent;
+  color: t.role('fg-muted');
+  cursor: pointer;
+
+  &:hover {
+    border-color: t.role('line');
+    background: t.role('surface-raised');
+    color: t.role('fg-strong');
+  }
+
+  &[data-copied='true'] {
+    color: t.role('success');
+  }
+}
+
+.size-sm {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+}
+
+.size-md {
+  inline-size: 2rem;
+  block-size: 2rem;
+}
+
+.size-lg {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+}

package/src/components/CopyButton.tsx

@@ -0,0 +1,62 @@
+// Copies one string to the clipboard and says so — the control beside a short URL, an id, a
+// command. Server-rendered as a real button; the clipboard write and the 1.6 s "copied" state are
+// additive client behaviour, so with scripting off the button is there and does nothing, which
+// is what a clipboard needs a script for anyway.
+
+import type { JSX } from 'solid-js';
+import { announce } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { iconCheck } from '../icons/glyphs/check';
+import { iconCopy } from '../icons/glyphs/copy';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import styles from './CopyButton.module.scss';
+import { Icon } from './Icon';
+import type { Size } from './variants';
+
+/** How long the check mark stays before the copy icon returns. */
+export const COPIED_MS = 1600;
+
+export interface CopyButtonProps {
+  /** What lands on the clipboard. */
+  value: string;
+  /** The accessible name; defaults to the catalog's `ui.copy`. */
+  label?: string | undefined;
+  /** Announced to assistive tech once the write succeeds; defaults to `ui.copied`. */
+  copiedLabel?: string | undefined;
+  size?: Size | undefined;
+  class?: string | undefined;
+}
+
+export function CopyButton(props: CopyButtonProps): JSX.Element {
+  const ui = useUi();
+  const rt = solid();
+  const [copied, setCopied] = rt.createSignal(false);
+  const label = (): string => props.label ?? ui.t(UI_KEYS.copy);
+  const copiedLabel = (): string => props.copiedLabel ?? ui.t(UI_KEYS.copied);
+
+  const onClick = async (): Promise<void> => {
+    // Optional chaining on both: a harness has a `navigator` with no `clipboard`, and `announce`
+    // needs a document that can find its live region.
+    await navigator.clipboard?.writeText(props.value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), COPIED_MS);
+    if (typeof document !== 'undefined' && typeof document.getElementById === 'function') {
+      announce(copiedLabel());
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      class={cx(styles['copy'], styles[`size-${props.size ?? 'md'}`], props.class)}
+      title={label()}
+      aria-label={copied() ? copiedLabel() : label()}
+      data-copied={copied() ? 'true' : undefined}
+      onClick={() => void onClick()}
+    >
+      <Icon glyph={copied() ? iconCheck : iconCopy} size="sm" />
+    </button>
+  );
+}